免費AI編程助手
Angular4 開發(fā)實戰(zhàn)：(5） 組件通訊(@Input和@Output)
- 父到子
- 子到父
@Input()屬性裝飾器來實現(xiàn)。
我們依舊使用CardComponent和CardHeaderComponent兩個組件：
// app/components/card-header/card-header.component.ts
@Input() title: string;
// app/components/card-header/card-header.component.html
<div class="card-header">
{{title}}
</div>
// app/demo/demo-input/demo-input.component.html
<app-card>
<app-card-header [title]="'這是Input輸入'"></app-card-header>
</app-card>
@Input()屬性裝飾器來聲明輸入屬性tilte，然后就像內(nèi)置屬性一樣將值賦值給[title]。
注：@Input() 裝飾器支持一個可選的參數(shù)，用來指定組件綁定屬性的名稱。如果沒有指定，則默認使用 @Input() 裝飾器后面的屬性名：
@Input('bindingPropertyName')
// card-header.component.ts
@Component({
inputs:['content']
})
export class CardHeaderComponent {
content: string;
}
// card-header.component.html
<app-card>
<app-card-header [content]="'這是另外一種方式聲明輸入屬性'"></app-card-header>
</app-card>
@Component({
inputs:['stateActive:name2']
})
@Input()來聲明輸入屬性。
setter & getter方法
Angular還為輸入屬性提供了setter和getter方法，可以讓我們對輸入屬性值進行一些操作：
// card-header.component.ts
export class CardHeaderComponent {
_count: number;
@Input()
set count(value: number) {
this._count = value + 1;
}
get count(): number {
return this._count;
}
}
// card-header.component.html
<div>數(shù)字：{{_count}}</div>
_count)來賦值。
(2) 子到父的數(shù)據(jù)傳遞
通過事件綁定，我們就可以實現(xiàn)子組件向父組件傳遞數(shù)據(jù)，一般我們使用@Output()屬性裝飾器來實現(xiàn)。
實現(xiàn)步驟：首先需要在子組件中定義事件（使用EventEmitter方法），子組件的事件被觸發(fā)時引發(fā)父組件的事件響應(yīng)，同時將事件參數(shù)傳遞給父組件的響應(yīng)函數(shù)，這樣就完成了子組件向父組件傳遞數(shù)據(jù)。
我們創(chuàng)建CardFooterComponent：
// card-footer.component.ts
@Output() onChange: EventEmitter<string> = new EventEmitter();
onBlur(value: string) {
this.onChange.emit(value); // 傳播事件
}
// card-footer.component.html
<input type="text" (change)="onBlur($event.target.value)">
// demo-input.component.html
<app-card>
<app-card-footer (onChange)="onChange($event)"></app-card-footer>
</app-card>
// demo-input.component.ts
onChange(event: any) {
alert(event);
}
@Output()定義了一個輸出屬性，然后在使用時就可以像內(nèi)置事件一樣使用(onChange)="onChange($event)"。當(dāng)input失去焦點時，我們就能獲取到值。
在上一章“屬性和事件綁定”中講過，每一個Angular事件監(jiān)聽函數(shù)都有一個$event參數(shù)，而自定義事件的參數(shù)也就是emit()中傳遞的參數(shù)。
注：@Output() 裝飾器支持一個可選的參數(shù)，用來指定組件綁定屬性的名稱。如果沒有指定，則默認使用 @Output 裝飾器，裝飾的屬性名：
@Output('bindingPropertyName')
@Component({
outputs:['onChange']
})
onChange: EventEmitter<string> = new EventEmitter();
@Component({
outputs:['stateChange:change']
})
@Output()來聲明輸入屬性。
如發(fā)現(xiàn)任何問題或有好的建議，歡迎在下方評論留言。
更多建議：