Angular2-組件間數據傳遞的兩種方式

　　Angular2組件間數據傳遞有多種方式，其中最經常使用的有兩種，一種是配置元數據(或者標籤裝飾)，一種是用單例模塊傳遞；有兩個元數據具備傳遞數據的功能：inputs和outputs。

1、元數據傳遞

　　1)配置inputs，接收外部傳來的參數：

　　在inputs裏配置輸入屬性，宿主同過這個屬性就能把數據傳進來。

　　示例以下：

@Component({
selector: 'test-component',
template: `{{inputValue}}`,
inputs: ['inputsValue'] 
})
export class TestComponent {
private inputsValue;//注意，要在組建內聲明，才能使用
}

　　宿主經過「[輸入屬性]=輸入值」的方式傳值，給屬性打上中括號表明輸入。以上面例子爲例，其父組件調用方式以下:

@Component({
selector: 'parent-component',
template: `<test-component [inputsValue]="data"></test-component>`//以「[屬性]=值」的方式傳遞
})
export class ParentComponent {
  private data = 'Hello InputValue~!';
}

　　固然，若是不配置元數據，咱們還能夠在組件類中用「@Inputs() inputsValue」聲明，效果同樣；咱們還能夠編寫「setter」函數對輸入的數據進行加工過濾，這裏不作細講。

　　2)配置outputs,給父組件傳遞數據：

　　outputs是利用自定義事件的機制給父組件傳遞數據；元數據配置與inputs類似，只是組件類中要給輸出屬性建立EventEmitter實例。

　　示例以下：

@Component({
  selector: 'test-component',
  template: `<button (click)="clickToSend()">點擊按鈕，輸出數據</button>`,
  outputs: '[outputValue]'
})
export class TestComponent {
  public outputValue = new EventEmmitter;
  private clickToSend() {
    this.outputValue.emit('Hello OutputValue~!');//注意，自定義事件必需要藉助異步程序執行發佈函數；異步程序有事件、先後端數據交互、延時函數。
  }
}

　　outputs至關於給組件聲明瞭一個自定義事件，父組件綁定該事件就能與輸出機制創建聯繫，輸出數據就是事件對象。

　　以上面例子爲例，父組件示例以下：

@Component({
  selector: 'parent-component',
  template: `<test-component (outputValue)="getValue($event)"></test-component>`//屬性加上小括號表明輸出
})
export class ParentComponent {
  private getValue(event) {
    console.log(event);//Hello OutputValue~!
  } 
}

　　一樣，你也能夠用@Output來聲明，這裏不作細講。

 

2、單例模塊傳遞

　　JavaScript傳值策略是：基本類型數據傳數據副本，對象類型數據傳對象引用。Angular2各模塊注入Module中，只要在Module做用域範圍，這些模塊再經過依賴注入方式注入到別的模塊，依賴的模塊是單例的。

　　咱們能夠利用對象傳引用的特性，達到組件間傳遞數據的目的。

　　好比我想將數據傳給子組件，只需在子組件構造器中注入該組件，該組件因爲是單例的，那麼一方改動另外一方能實時訪問到。

　　示例以下：

//父組件：
@Component({
  selector: 'parent-component',
  template: `
    <p>{{value}}</p>
    <child-component></child-component>
  ` 
})
export class ParentComponent {
  public value = 'Parent Value...';//注意！這裏不能使用private權限，不然外部模塊沒法訪問到這個屬性。
}

//子組件：
@Component({
  selector: 'child-component',
  template: `{{_parent.value}}`
})
export class ChildComponent {
  constructor(private _parent: ParentComponent) {}//注入父組件的實例，就能訪問到父組件非私有屬性了。
}

　　結果是<p>Parent Value...</p><child-component>Parent Value...</child-component>

　　你還能夠用指令、管道、服務來傳值，只要是單例模塊，都能作到；不過爲了代碼內聚性，建議只使用組件或者服務做爲值傳遞的媒介。

 

還有別的傳值方式嗎？

　　固然還有，好比繞過Angular2的API，使用JQuery的data函數進行值的獲取和傳遞。不建議這麼作，Angular不鼓勵開發者直接操做DOM，它內置了一系列指令以及機制來弱化開發者對DOM的直接操做，開發者使用Angular提供的API能夠減小不少操做DOM的代碼。