【译】Angular中，向⼦组件传值的5种⽅式
前⾔
如果你是新⼿，或翻译angularJs的项⽬代码时，第⼀个要想的可能是：我如何向周围传值。
本⽂，让我们跟随  的⽰例来阐述下⾯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) {}angular和angularjs
触发事件：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: Entity }));
在此时，ajax请求会更⾼效，因为data会缓存，但仍与服务端保持同步更新！在⼩应⽤中，NgRx不是必须的，但是当构建⼀个⼤的企业级yietjf，它就很好⽤。
Ngrx需要配置⼀些⽂件，但 BrieBug 创建 ⼀个项⽬，让你通过cli 来⽣成这些⽂件——  。它⾃动创建actions,reducers，帮你命名⼀切。你只⽤定义model，然后关联到后台服务即可！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。