這篇文章將為大家詳細(xì)講解有關(guān)Angular2 中怎么父子組件數(shù)據(jù)通信，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有新蔡免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

父組件和子組件

接觸過(guò)面向?qū)ο缶幊痰拈_(kāi)發(fā)者肯定不會(huì)對(duì)父子關(guān)系陌生，在Angular 2中子組件存在于父組件“體內(nèi)”，并且父子組件可以通過(guò)一些渠道進(jìn)行通訊。

父組件向子組件傳入數(shù)據(jù) – @Input

當(dāng)我們著手開(kāi)始開(kāi)發(fā)一個(gè)組件時(shí)，第一件想到的應(yīng)該就是為其傳入數(shù)據(jù)，畢竟我們期望組件為我們處理某些工作通常就需要給其提供“養(yǎng)料”，畢竟不能又讓馬兒跑，又不給馬兒吃草。Angular 2中子組件使用裝飾器@Input接收父組件傳入的數(shù)據(jù)：

// child-component.ts
import { OnInit, Component, Input } from '@angular/core';

@Component({
  selector: 'child-component',
  ...
})
export class ChildComponent implements OnInit {
  @Input
  count: number = 0;

  ngOnInit() {
    console.log(this.count);  // 父組件內(nèi)傳入的值或者我們自己設(shè)置的初始值0
  }

  increaseNumber() {
    this.count ++;
  }

  descreaseNumber() {
    this.count --;
  }
}

可以看到，我們使用裝飾器@Input修飾了count屬性，這就意味著child-component被使用時(shí)期望收到一個(gè)名為count的屬性，當(dāng)然不屬于自己掌控的范圍內(nèi)要小心行事，別人使用我們的組件時(shí)什么情況都可能出現(xiàn)，所以我們?yōu)閏ount設(shè)置了一個(gè)初始值，當(dāng)父組件沒(méi)有給我們的count屬性傳值時(shí)，我們就取此初始值。

// father-component.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../child-component/child-component';

@Component({
  template: `
    <child-component [count]='initialCount'></child-component>
  `,
  ...
})
export class FatherComponent {
  initialCount: number = 5;
}

父組件使用child-component時(shí)，為count屬性賦予初始值initialCount，即5，也就是說(shuō)此時(shí)ChildComponent的ngOnInit方法中會(huì)打印出5。注意[count]語(yǔ)法標(biāo)識(shí)了數(shù)據(jù)流向：父組件流入子組件，即單向數(shù)據(jù)綁定。此時(shí)如果傳入的數(shù)據(jù)是基本數(shù)據(jù)類型，子組件中對(duì)數(shù)組做任何操作都不會(huì)影響到父組件，但如果傳入的不是基本數(shù)據(jù)類型，而是引用數(shù)據(jù)類型，則要格外注意子組件中對(duì)數(shù)據(jù)的操作可能會(huì)對(duì)父組件產(chǎn)生影響。

子組件通知父組件數(shù)據(jù)已處理完成 – @Output、EventEmitter

父組件傳入數(shù)據(jù)給子組件之后并不是萬(wàn)事大吉了，就像父母養(yǎng)育孩子，供其讀書(shū)，但孩子需要把學(xué)習(xí)進(jìn)度、考試成績(jī)等呈現(xiàn)給父母看（不管是否自愿…），父組件也需要子組件在合適的時(shí)機(jī)通知自己數(shù)據(jù)已經(jīng)處理好，可以檢閱了。而此時(shí)就需要使用@Output和EventEmitter了。

// father-component.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../child-component/child-component';

@Component({
  template: `
    <child-component [count]='initialCount' (change)="countChange($event)"></child-component>
  `,
  ...
})
export class FatherComponent {
  initialCount: number = 5;

  countChange($event) {

  }
}

看看我們?cè)诟附M件中加入了什么東東：

1.(change)，看到這樣的語(yǔ)法第一時(shí)間就知道這是事件綁定，也就是說(shuō)我們?cè)诟附M件中監(jiān)聽(tīng)子組件的某些變化，并能夠在其變化時(shí)作出相關(guān)操作；

2.增加了countChange方法作為change事件的處理函數(shù)。

但是稍等，當(dāng)我們?yōu)閕nput標(biāo)簽指定type、placeholder等屬性時(shí)，我們知道它們都已經(jīng)被“實(shí)現(xiàn)了”，所謂“實(shí)現(xiàn)”，即這些屬性在input標(biāo)簽上是有意義的。但是目前這里我們?yōu)閏hild-component指定了名為change的事件是沒(méi)意義的，因?yàn)槠洳⑽础皩?shí)現(xiàn)”change事件，于是下一步我們就需要使用@Output和EventEmitter將其變得有意義：

// child-component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  ...
})
export class ChildComponent {
  @Input
  count: number = 0;

  @Output
  change = new EventEmitter();

  increaseNumber() {
    this.count ++;
    this.change.emit(this.count);
  }

  descreaseNumber() {
    this.count --;
    this.change.emit(this.count);
  }
}

讓我們?cè)賮?lái)看看在子組件中增加了什么東東：

1.使用裝飾器@Output修飾了change屬性，并為其賦了初值為EventEmitter的實(shí)例；

2.在increaseNumber和descreaseNumber方法修改了count屬性后，調(diào)用了change屬性的emit方法通知父組件。

此時(shí)，我們?cè)贑hildComponent中實(shí)現(xiàn)了change，于是父組件中為child-component綁定change事件也就有意義了：當(dāng)子組件通知父組件時(shí)，父組件可以獲取到通知中攜帶的數(shù)據(jù)并進(jìn)行下一步操作：

// father-component.ts
...
countChange($event) {
  this.initialCount = $event;
}
...

總結(jié)

不知道你有沒(méi)有發(fā)現(xiàn)，其實(shí)上面我們模擬了“雙向數(shù)據(jù)綁定”：父組件將數(shù)據(jù)傳入子組件，子組件改變數(shù)據(jù)時(shí)通知父組件進(jìn)行“同步更新”。但是要注意其實(shí)數(shù)據(jù)流向是單向的，即數(shù)據(jù)是父組件單向流入子組件，父組件數(shù)據(jù)的更新是通過(guò)子組件的事件通知以后才被更新。也就是說(shuō)其實(shí)在Angular 2中：雙向數(shù)據(jù)綁定 = 單向數(shù)據(jù)綁定 + 事件，以我們最熟悉的ngModel為例：

<input type='text' name='userName' [(ngModel)]="userName">

和下面的寫(xiě)法是等價(jià)的：

復(fù)制代碼 代碼如下:

<input type='text' name='userName' [ngModel]="userName" (ngModelChange)="userName=$event">

同樣的，如果將我們的child-component組件寫(xiě)作雙向數(shù)據(jù)綁定的形式即為：

復(fù)制代碼 代碼如下:

<child-component [(count)]='initialCount'></child-component>

關(guān)于Angular2 中怎么父子組件數(shù)據(jù)通信就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：Angular2中怎么父子組件數(shù)據(jù)通信-創(chuàng)新互聯(lián)
文章地址：http://chinadenli.net/article42/edhec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)