在 Angular 2 中的元件之間傳遞資料
- 在 Angular 2 中使用輸入裝飾器將資料從父元件傳遞到子元件
-
在 Angular 2 中使用輸出和
EventEmitter將資料從子元件傳遞到父元件 - 在 Angular 2 中使用服務在元件之間傳遞資料
本文將向你展示如何在 Angular 2 中的兩個元件之間傳遞資料。
在 Angular 2 中使用輸入裝飾器將資料從父元件傳遞到子元件
當父元件需要與其子元件通訊時，使用通過 Input() 裝飾器的父子元件。父元件傳送資料或對子元件執行操作。
它通過使用 @Input() 裝飾器通過模板提供資料來工作。這用於修改和跟蹤元件的輸入設定。
以下程式碼示例將演示如何使用 Angular 2 中的輸入裝飾器在兩個元件之間建立這種型別的關係。
TypeScript 程式碼（App.component.ts）：
import { Component } from '@angular/core';
import { Demo } from './Demo';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
DemoEx:Demo[] = [
new Demo('First Example'),
new Demo('SECOND Example')
];
}
TypeScript 程式碼（input.component.ts）：
import { Component, OnInit, Input} from '@angular/core';
import { Demo } from '../Demo';
@Component({
selector: 'app-demo',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class inputCom implements OnInit {
@Input() Demo: Demo;
constructor() { }
ngOnInit() {
}
}
HTML 程式碼（app.component.html 和 input.component.html）：
<main>
<section>
<div class="card">
<header>{{Demo.name}}</header>
</div>
</section>
</main>
<h3>Parent to child Component Interaction in Angular</h3>
<app-demo *ngFor="let Demo of DemoEx" [Demo]="Demo"></app-demo>
點選這裡檢視上面程式碼的演示。
在 Angular 2 中使用輸出和 EventEmitter 將資料從子元件傳遞到父元件
EventEmitter 是一個可以發出自定義事件的類。它是一個 Angular 2 元件，使你能夠在 Angular 2 應用程式中使用可觀察模式。
該元件提供了傳統回撥模式的替代方案，並通過在不再需要 observable 時取消訂閱來簡化觸發更改檢測的過程。
以下示例顯示了父元件如何訂閱事件並相應地更改其行為。
TypeScript 程式碼（parent.component.ts）：
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'parent',
template: '<button (click)="DemoEx()">Click here to go to the next component</button>',
})
export class ParentComponent {
@Input() name: string;
@Output() SampleEx = new EventEmitter<string>();
DemoEx() {
this.SampleEx.emit(this.message)
}
message: string = "You are in Child Component";
}
TypeScript 程式碼（app.component.ts）：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
message:string='';
NextCom($event) {
this.message = $event;
}
}
HTML 程式碼（app.component.html）：
<parent name="{{ name }}" (SampleEx)="NextCom($event)"></parent>
<br/>
<br/>
{{message}}
點選這裡檢視上面示例的演示。
在 Angular 2 中使用服務在元件之間傳遞資料
服務是實現 Injectable 介面的類。它必須具有使用 Injectable Decorator 註釋的方法，並在需要時實現一個或多個介面。
在沒有直接連結的元件之間傳輸資料時，應該使用共享服務。當資料需要一直保持同步時，RxJS 的 BehaviorSubject 就派上用場了。
我們可以將名稱設定為可使用 BehaviorSubject 使用 the.next() 方法修改的可觀察物件。然後我們可以使用 getValue() 函式提取最後一個值作為原始資料。
當前值儲存在 BehaviorSubject 中。因此，元件將始終讀取 BehaviorSubject 中的最新資料值。
請參見下面的示例。
TypeScript 程式碼（first.component.ts）：
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
selector: 'app-demo1',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
sharedData: string;
data: any;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedData$
.subscribe(sharedData => this.sharedData = sharedData);
}
updateData() {
this.sharedService.setData(this.data);
}
}
TypeScript 程式碼（second.component.ts）：
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
selector: 'app-demo',
templateUrl: './second.component.html',
styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
sharedData: string;
data: any;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedData$
.subscribe(sharedData => this.sharedData = sharedData);
}
updateData() {
this.sharedService.setData(this.data);
}
}
HTML 程式碼：
<h3>2nd Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
Saved Data {{ sharedData }}
<h1>Example of Unrelated Components: Sharing Data with a Service</h1>
<h3>1st Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
SavedData {{ sharedData }}
在元件之間傳遞資料的好處是，你可以通過將專案分解為更小的部分來更好地理解你的專案，從而讓你能夠集中精力，而不會被數百行程式碼行所累。
如果每個開發人員都在單獨的元件上工作，團隊也可以更有效率地運作。
點選這裡檢視上面示例的演示。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook