在Angular2中如何實現元件交互

這篇文章主要介紹了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中文網其他相關文章！