本文介紹了Angular2 組件間通過@Input @Output通訊示例，分享給大家，具體如下：
父組件傳給子組件：
子組件設置@Input屬性,父組件即可通過設置html屬性給子組件傳值。
子組件：
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
上面的代碼設置了兩個可供父組件傳入的屬性:title和name,當設置name屬性時，set name(name:string)方法會執行,如果不需要處理setter，那么用title的形式，一行代碼聲明即可.
父組件調用:
<app-header [title]="title" name="姓名"></app-header>
調用方法有兩種，屬性名用中括號包圍的title，值title是父組件中的對象名，而name沒有用中括號，后面的值就是傳給子組件的字符串。當然，不用中括號，也可以用{{name}}傳對象的值。
如果要監聽傳入屬性值的變化，可以在子組件實現OnChanges（@angular/core中）接口：
export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
}
SimpleChanges 是一個用屬性名作key的數組，通過屬性名取出對象，對象里包含該屬性變化前(previousValue)后(currentValue)的值。
父組件監聽子組件變化
子組件通過@Output()暴露EventEmitter，父組件在聲明子組件時增加EventEmitter的回調方法，子組件在需要的時候彈射事件，父組件的回調方法里就能收到。
子組件：
export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
//聲明事件發射器
@Output() checkEmitter=new EventEmitter<boolean>();
//用于綁定checkbox的checked屬性
isChecked=true;
toggle() {
this.isChecked=!this.isChecked;
//發射事件
this.checkEmitter.emit(this.isChecked);
}
}
子組件模板:
<p>
{{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>
父組件中聲明:
父組件事件回調接收:
export class AppComponent implements AfterViewInit{
ngAfterViewInit() {
}
onCheckedChange(isChecked:boolean) {
console.log("checkbox選中狀態："+isChecked);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
