Angular2 組件間通過(guò)@Input @Output通訊示例

更新時(shí)間：2017年08月24日 16:09:37 作者：冰凍魚(yú)

本篇文章主要介紹了Angular2 組件間通過(guò)@Input @Output通訊示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了Angular2 組件間通過(guò)@Input @Output通訊示例，分享給大家，具體如下：

父組件傳給子組件：

子組件設(shè)置@Input屬性,父組件即可通過(guò)設(shè)置html屬性給子組件傳值。

子組件：

 @Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

上面的代碼設(shè)置了兩個(gè)可供父組件傳入的屬性:title和name,當(dāng)設(shè)置name屬性時(shí)，set name(name:string)方法會(huì)執(zhí)行,如果不需要處理setter，那么用title的形式，一行代碼聲明即可.

父組件調(diào)用:

<app-header [title]="title" name="姓名"></app-header>

調(diào)用方法有兩種，屬性名用中括號(hào)包圍的title，值title是父組件中的對(duì)象名，而name沒(méi)有用中括號(hào)，后面的值就是傳給子組件的字符串。當(dāng)然，不用中括號(hào)，也可以用{{name}}傳對(duì)象的值。

如果要監(jiān)聽(tīng)傳入屬性值的變化，可以在子組件實(shí)現(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 是一個(gè)用屬性名作key的數(shù)組，通過(guò)屬性名取出對(duì)象，對(duì)象里包含該屬性變化前(previousValue)后(currentValue)的值。

父組件監(jiān)聽(tīng)子組件變化

子組件通過(guò)@Output()暴露EventEmitter，父組件在聲明子組件時(shí)增加EventEmitter的回調(diào)方法，子組件在需要的時(shí)候彈射事件，父組件的回調(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>

父組件中聲明:

復(fù)制代碼代碼如下:

<app-header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>

父組件事件回調(diào)接收:

export class AppComponent implements AfterViewInit{
 ngAfterViewInit() {

 }
 onCheckedChange(isChecked:boolean) {
  console.log("checkbox選中狀態(tài)："+isChecked);
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: