Angular中的應用由各式各樣的 Component 交互作用而成，
這些 Ｃomponent 形成一個 Component Tree，
資料可以在 Component Tree 透過 屬性 [ Property ] 、事件 ( event ) 傳遞。
大綱
Angular 提供兩種語法處理 Ｃomponet 之間的資料傳遞
輸入 ＠Input（）
輸出 @Output （）
父組件向子組件傳遞資料
father.component.html
<app-child [title]="childTitle"></app-child>
子組件提供 title 屬性供父組件 childTitle 提供資料給它
father.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-father',
templateUrl: './father.component.html',
styleUrls: ['./father.component.css']
})
export class FatherComponent {
childTitle = 'Child Title';
}
child.component.html
<h1>{{ title }}</h1>
child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() title: string;
}
兩件事情需要注意
從 @angular/core import Input( )
在要對外開放的變數前，加上 ＠Input( )
可能會有一個疑問，為什麼 @Input ( ) 後面會有一個括號可是我們都沒有使用到呢？
- 如果你有需要在 父組件 屬性綁定時調整名稱，但是不想異動整個 component.ts 內變數可以使用
- 不太建議這樣做，應該透過重構功能鍵 （你可以看到必須使用 忽略掉 tslint 警告 ）
father.component.html
<!-- <app-child [title]="childTitle"></app-child> -->
<app-child [newTitle]="childTitle"></app-child>
child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
// @Input('title') title: string;
// tslint:disable-next-line:no-input-rename
@Input('newTitle') title: string;
}
子組件向父組件傳遞資料
father.component.html
<app-child (triggerFather)="trigger()"></app-child>
<p>counter : {{ counter }}</p>
father.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-father',
templateUrl: './father.component.html',
styleUrls: ['./father.component.css']
})
export class FatherComponent {
counter = 0;
trigger() {
this.counter++;
}
}
child.component.html
<button (click)='trigger()'>add Counter</button>
child.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Output() triggerFather = new EventEmitter();
trigger() {
this.triggerFather.emit();
}
}
結果
事件傳遞是子組件向父組件傳遞資料最常使用的方式
使用 EventEmitter 類別，用來訂閱和觸發自定義事件
由 Output 裝飾器修飾 輸出屬性 （ ex : triggerFather )
父組件透過事件綁定 ( ex : trigger ) 的方式訂閱子組件觸發的事件 （ ex : click ）
結論
在 Angular 當中還有許多種不同的傳遞方式，
這裡僅提到最基本的兩種，
希望對各位有幫助 ：）