這篇文章主要為大家展示了“Angular2如何實(shí)現(xiàn)組件交互”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular2如何實(shí)現(xiàn)組件交互”這篇文章吧。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的高明網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

前言

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

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

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

子組件

{{hero.name}} says:
@Input() hero: Hero;

父組件

myhero = "Mr.IQ";

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

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

子組件

Agree
@Output() onVoted = new EventEmitter();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

父組件

myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

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

setter截聽輸入屬性值的變化

子組件

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

父組件

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

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

子組件

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

父組件

Stop
{{timer.seconds}}