【譯】Angular中，向子組件傳值的5種方式

翻譯：http://blog.briebug.com/5-ways-to-pass-data-into-child-components-in-angular    原做者：

前言

若是你是新手，或翻譯angularJs的項目代碼時，第一個要想的多是：我如何向周圍傳值。

本文，讓咱們跟隨 accompanying demo app  的示例來闡述下面5個技術：

1. @Input來響應變化的值
2. @ViewChild來設置屬性
3. 在services中使用BehaviorSubjects
4. 使用Angular Router
5. 使用NgRx

我會從最基本的開始，最後整個會變得很複雜。它們每個技術都能適應衆多的場景，但由你來決定你的app中， 最終使用哪一個技術！

Inputs

Inputs 是最簡單最直接的傳值到子組件內的方式。只須要添加input 裝飾器到相應的屬性，以下：

@Input() price:number;

在模板文件中，它只是一個屬性，你能夠用  [ ] 來綁定它的值，也能夠傳入靜態值。

<my-component [price]="500"></my-component>
<my-component price="One kajillion dollars"></my-component>

你也能夠向屬性傳入方法，靜態值，表達式，你甚至能夠傳入一個異步的observable管道，它會自動取出其中的值。以後在你的組件中，這個屬性可以一直指向最後一次的emitted值。

<my-component [profile]="user$ | async"></my-component>

子組件能夠使用ngOnChanges 以及 getter ,setter屬性來響應父組件內的變化，仔細看一下例子吧！

ViewChild

使用ViewChild，你能夠操做子組件內的屬性以及方法。在動態插入組件或元素時，你能夠經過子組件的類或模板引用變量的方式，來直接引用子組件，這技術就會駕輕就熟。 要使用ViewChild，須要傳入子組件的類或是模板引用變量，這樣在父組件內輕易的獲得屬性指向子組件。

這個聲明只會查詢組件內第一個PriceComponent的實例：

@ViewChild(PriceComponent) priceComponent;

若是你的模板中使用引用變量：

<app-price-component #price></app-price-component

下面的聲明能讓你建立一個它的引用

@ViewChild('price') priceComponent;

 

在服務中使用BehaviorSubjects

BehaviorSubjects是讓你在app內部共享數據的一個簡單的方式。Observable的模式，讓你能隨時dgtdv生成父，子組件內的事件，由於它就共用同一個實例。

首先建立一個包含BehaviorSubject的服務，而後添加一個函數，來更新BehaviorSubject。 在組件中注入該服務，而後調用這個函數來更新數據值，以及訂閱這個BehaviorSubject，就是這麼容易！

好比：

在組件中，注入一個public 的服務變量，
constructor(public service: BitcoinService) {} 
觸發事件：this.service.augmentValue(val);

在組件的模板中，能夠用管道訂閱值：<p>{{ service.bitcoinValueSubject | async | currency }}</p> 

Router

Router 是一個在app內管理狀態的方法，當你點擊鏈接同時Url變化時。當路由到子組件時，能夠訪問到路由參數：route params，這很是有用。使用路由解析的技術，可讓你在路由中傳遞有意義的信息！

路由解析器：Route resolvers  是在路由跳轉時，會先掛起，直到Observable 返回信息時，才進行路由到頁面。

好比：

爲了使用這個路由解析器，必須在路由配置中添加：
{
 path: ':symbol',
component: PriceComponent,
resolve: { coinData: CryptoResolver }
}

在組件內部使用時，會當即取到數據：

NgRx

NgRx是一個強壯的，功能強大的狀態管理系統，它基於redux,它具備響應開發，是一個observable的封裝!

在組件內取數據：entities$ = this.store.pipe(select(getAllEntitiesAsArray)); 

在組件內修改或刪除數據：this.store.dispatch(new EntityAction({ entity: this.myEntity }));

在此時，ajax請求會更高效，由於data會緩存，但仍與服務端保持同步更新！在小應用中，NgRx不是必須的，可是當構建一個大的企業級yietjf，它就很好用。

Ngrx須要配置一些文件，但 BrieBug 建立 一個項目，讓你經過cli 來生成這些文件—— ngrx-entity-schematic 。它自動建立actions,reducers,幫你命名一切。你只用定義model,而後關聯到後臺服務便可！