Angular2實(shí)現(xiàn)組件交互的方法分析
本文實(shí)例講述了Angular2實(shí)現(xiàn)組件交互的方法。分享給大家供大家參考，具體如下：
前言
在Angular開發(fā)中，我們經(jīng)常會(huì)涉及到組件之間的交互，比如會(huì)引用自己部門開發(fā)的組件
有時(shí)候，我們需要向引用的組件里面綁定一些數(shù)據(jù)，或者我們需要引用的子組件輸出一些數(shù)據(jù)
這時(shí)，我們就需要處理好組件之間的交互
組件交互的關(guān)鍵代碼
父組件綁定數(shù)據(jù)到子組件
子組件
<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;
父組件
<hero-child [hero]="myhero" ></hero-child> myhero = "Mr.IQ";
這里子組件的@Input表示它需要hero這個(gè)實(shí)體，之后父組件引入子組件的時(shí)候，就得在子組件標(biāo)簽內(nèi)寫入hero，同時(shí)在自己的組件內(nèi)為hero賦值就實(shí)現(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表示它會(huì)用onVoted方法向父組件傳遞一個(gè)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對(duì)父組件傳過來的數(shù)據(jù)進(jìn)行修改顯示
父組件與子組件通過本地變量互動(dòng)
子組件
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)簽建立本地變量來代表子組件，然后通過變量就可以實(shí)現(xiàn)訪問子組件的變量和方法
小結(jié)
組件交互是經(jīng)常用到的知識(shí)，需要熟練掌握
還有其它交互方式，比如生命周期、服務(wù)，遇到了可以繼續(xù)深入研究
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了AngularJS表單編輯提交功能實(shí)例,本文講解如何修改表單的默認(rèn)值,需要的朋友可以參考下2015-02-02
AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例
這篇文章主要介紹了AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法,結(jié)合具體實(shí)例形式分析了ng-class操作頁面class樣式的相關(guān)技巧,需要的朋友可以參考下2017-05-05
Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起，依賴注入（IoC）的概念徹底深入人心，它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念，像spring中的依賴注入，但是又有所不同。Angular中只需要在需要的地方聲明一下即可，類似模塊的引用，因此十分方便。2016-10-10
AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼
這篇文章主要介紹了AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼,需要的朋友可以參考下2017-09-09
如何在Angular應(yīng)用中創(chuàng)建包含組件方法示例
這篇文章主要給大家介紹了關(guān)于如何在Angular應(yīng)用中創(chuàng)建包含組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本篇文章主要介紹了Angualr 組件間通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要為大家介紹了Angular模塊封裝概念常見的錯(cuò)誤分析理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
AngularJS服務(wù)service用法總結(jié)
這篇文章主要介紹了AngularJS服務(wù)service用法,結(jié)合實(shí)例形式總結(jié)分析了服務(wù)Service的概念、功能及自定義服務(wù)的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
詳解AngularJS臟檢查機(jī)制及$timeout的妙用
本篇文章主要介紹了詳解AngularJS臟檢查機(jī)制及$timeout的妙用，“臟檢查”是Angular中的核心機(jī)制之一，它是實(shí)現(xiàn)雙向綁定、MVVM模式的重要基礎(chǔ)，有興趣的可以了解一下2017-06-06