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