【译】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;