Angular2 組件間通過@Input @Output通訊示例

來源：懂視網責編：小采時間：2020-11-27 22:31:36

Angular2 組件間通過@Input @Output通訊示例

Angular2 組件間通過@Input @Output通訊示例:本文介紹了Angular2 組件間通過@Input @Output通訊示例，分享給大家，具體如下：父組件傳給子組件：子組件設置@Input屬性,父組件即可通過設置html屬性給子組件傳值。子組件： @Input() title:string; _name:string = ''; @

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular2 組件間通過@Input @Output通訊示例:本文介紹了Angular2 組件間通過@Input @Output通訊示例，分享給大家，具體如下：父組件傳給子組件：子組件設置@Input屬性,父組件即可通過設置html屬性給子組件傳值。子組件： @Input() title:string; _name:string = ''; @

本文介紹了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>

父組件中聲明:

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

父組件事件回調接收:

export class AppComponent implements AfterViewInit{
 ngAfterViewInit() {

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular2 組件間通過@Input @Output通訊示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：示例 ou 組件

熱門焦點

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

Angular2 組件間通過@Input @Output通訊示例

Angular2 組件間通過@Input @Output通訊示例

Angular2 組件間通過@Input @Output通訊示例

最新推薦

猜你喜歡

熱門推薦