【译】Angular中,向子组件传值的5种方式

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

翻译: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;

在模板文件中,它只是一个属性,你可以用  [ ] 来绑定它的值,也可以传入静态值。


你也可以向属性传入方法,静态值,表达式,你甚至可以传入一个异步的observable管道,它会自动取出其中的值。之后在你的组件中,这个属性能够一直指向最后一次的emitted值。

子组件可以使用ngOnChanges 以及 getter ,setter属性来响应父组件内的变化,仔细看一下例子吧!

ViewChild

使用ViewChild,你可以操作子组件内的属性以及方法。在动态插入组件或元素时,你可以通过子组件的类或模板引用变量的方式,来直接引用子组件,这技术就会得心应手。 要使用ViewChild,需要传入子组件的类或是模板引用变量,这样在父组件内轻易的得到属性指向子组件。

这个声明只会查询组件内第一个PriceComponent的实例:

@ViewChild(PriceComponent) priceComponent;

如果你的模板中使用引用变量:

下面的声明能让你创建一个它的引用

@ViewChild('price') priceComponent;

 

在服务中使用BehaviorSubjects

BehaviorSubjects是让你在app内部共享数据的一个简单的方式。Observable的模式,让你能随时dgtdv生成父,子组件内的事件,因为它就共用同一个实例。

首先创建一个包含BehaviorSubject的服务,然后添加一个函数,来更新BehaviorSubject。 在组件中注入该服务,然后调用这个函数来更新数据值,以及订阅这个BehaviorSubject,就是这么容易!

比如:【译】Angular中,向子组件传值的5种方式_第1张图片

在组件中,注入一个public 的服务变量,
constructor(public service: BitcoinService) {} 
触发事件:this.service.augmentValue(val);

在组件的模板中,可以用管道订阅值:

{{ service.bitcoinValueSubject | async | currency }}

 

Router

Router 是一个在app内管理状态的方法,当你点击连接同时Url变化时。当路由到子组件时,可以访问到路由参数:route params,这非常有用。使用路由解析的技术,可以让你在路由中传递有意义的信息!

路由解析器:Route resolvers  是在路由跳转时,会先挂起,直到Observable 返回信息时,才进行路由到页面。

比如:【译】Angular中,向子组件传值的5种方式_第2张图片

为了使用这个路由解析器,必须在路由配置中添加:
{
 path: ':symbol',
component: PriceComponent,
resolve: { coinData: CryptoResolver }
}

在组件内部使用时,会立即取到数据:

【译】Angular中,向子组件传值的5种方式_第3张图片

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,然后关联到后台服务即可!

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/1540190/blog/2962105

你可能感兴趣的:(javascript,python,ViewUI)