首頁  >  文章  >  web前端  >  在Angular2中如何實現元件交互

在Angular2中如何實現元件交互

亚连
亚连原創
2018-06-19 17:14:061639瀏覽

這篇文章主要介紹了Angular2實現組件交互的方法,結合實例形式總結分析了Angular2中組件交互的相關操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了Angular2實作元件互動的方法。分享給大家供大家參考,具體如下:

前言

在Angular開發中,我們經常會涉及到組件之間的交互,例如會引用自己部門開發的元件
有時候,我們需要向引用的元件裡面​​綁定一些數據,或者我們需要引用的子元件輸出一些數據
這時,我們就需要處理好元件之間的互動

元件互動的關鍵程式碼

#父元件綁定資料到子元件

#子元件

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

父元件

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

這裡子元件的@Input表示它需要hero這個實體,之後父元件引入子元件的時候,就得在子元件標籤內寫入hero,同時在自己的元件內為hero賦值就實作了父元件資料綁定到子元件

父元件監聽子元件的事件

子元件

<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值,父元件引入子元件之後,透過把子元件的方法綁定到自己的方法上,就可以達到監聽子元件的效果

setter截斷輸入屬性值的變化

子元件

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

父元件

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

父元件引用子元件之後,向子元件綁定數據,子元件透過set,get對父元件傳過來的資料進行修改顯示

父元件與子元件透過本地變數互動

子元件

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

父元件

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

子元件定義了變數和方法,父元件引用子元件標籤之後,透過在標籤建立本地變數來代表子元件,然後透過變數就可以實現存取子元件的變數和方法

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在Angular中如何實作orderBy排序與模糊查詢

vue vuex vue-rouert 權限路由(詳細教學)

在javascript中如何取得鍵盤的keyCode

#

以上是在Angular2中如何實現元件交互的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn