這篇文章主要介紹了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 = ''; @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>
父元件引用子元件之後,向子元件綁定數據,子元件透過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>
子元件定義了變數和方法,父元件引用子元件標籤之後,透過在標籤建立本地變數來代表子元件,然後透過變數就可以實現存取子元件的變數和方法
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
vue vuex vue-rouert 權限路由(詳細教學)
#以上是在Angular2中如何實現元件交互的詳細內容。更多資訊請關注PHP中文網其他相關文章!