亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Angular2實現(xiàn)組件交互的方法分析

 更新時間：2017年12月19日 14:01:51   作者：Francis-李鑫超  
這篇文章主要介紹了Angular2實現(xiàn)組件交互的方法,結(jié)合實例形式總結(jié)分析了Angular2中組件交互的相關(guān)操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了Angular2實現(xiàn)組件交互的方法。分享給大家供大家參考，具體如下：

前言

在Angular開發(fā)中，我們經(jīng)常會涉及到組件之間的交互，比如會引用自己部門開發(fā)的組件
有時候，我們需要向引用的組件里面綁定一些數(shù)據(jù)，或者我們需要引用的子組件輸出一些數(shù)據(jù)
這時，我們就需要處理好組件之間的交互

組件交互的關(guān)鍵代碼

父組件綁定數(shù)據(jù)到子組件

子組件

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

父組件

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

這里子組件的@Input表示它需要hero這個實體，之后父組件引入子組件的時候，就得在子組件標(biāo)簽內(nèi)寫入hero，同時在自己的組件內(nèi)為hero賦值就實現(xiàn)了父組件數(shù)據(jù)綁定到子組件

父組件監(jiān)聽子組件的事件

子組件

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

父組件

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

子組件的@Output表示它會用onVoted方法向父組件傳遞一個boolean值，父組件引入子組件之后，通過把子組件的方法綁定到自己的方法上，就可以達(dá)到監(jiān)聽子組件的效果

setter截聽輸入屬性值的變化

子組件

<h3>"{{name}}"</h3>
private _name = '';
@Input()
set name(name: string) { this._name = (name && name.trim()) || '<no name set>'; }
get name(): string { return this._name; }

父組件

<name-child [name]="myname"></name-child>

父組件引用子組件之后，向子組件綁定數(shù)據(jù)，子組件通過set，get對父組件傳過來的數(shù)據(jù)進(jìn)行修改顯示

父組件與子組件通過本地變量互動

子組件

seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`;  }

父組件

<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>

子組件定義了變量和方法，父組件引用子組件標(biāo)簽之后，通過在標(biāo)簽建立本地變量來代表子組件，然后通過變量就可以實現(xiàn)訪問子組件的變量和方法

小結(jié)

組件交互是經(jīng)常用到的知識，需要熟練掌握
還有其它交互方式，比如生命周期、服務(wù)，遇到了可以繼續(xù)深入研究

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

相關(guān)文章

最新評論