如今的前端開發(fā)，都朝組件式開發(fā)模式靠攏，如果使用目前最流行的前端框架Angular和React開發(fā)應用，不可避免地需要開發(fā)組件，也就意味著我們需要考慮組件間的數(shù)據(jù)傳遞等問題，不過Angular 2已經(jīng)為我們提供了很好的解決方案。

父組件和子組件

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

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

當我們著手開始開發(fā)一個組件時，第一件想到的應該就是為其傳入數(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)傳入的值或者我們自己設置的初始值0
  }

  increaseNumber() {
    this.count ++;
  }

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

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

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

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

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

  }
}

看看我們在父組件中加入了什么東東：

1.(change)，看到這樣的語法第一時間就知道這是事件綁定，也就是說我們在父組件中監(jiān)聽子組件的某些變化，并能夠在其變化時作出相關操作；

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

但是稍等，當我們?yōu)閕nput標簽指定type、placeholder等屬性時，我們知道它們都已經(jīng)被“實現(xiàn)了”，所謂“實現(xiàn)”，即這些屬性在input標簽上是有意義的。但是目前這里我們?yōu)閏hild-component指定了名為change的事件是沒意義的，因為其并未“實現(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);
  }
}

讓我們再來看看在子組件中增加了什么東東：

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

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

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

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

總結(jié)

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

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

和下面的寫法是等價的：

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論