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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

如何理解 golang nil

golang 中的 nil 是不同于其他语言的,为了更好的理解 nil,在此我将尝试一步一步揭示 nil 在 golang 中的一些操作和现象。 1. nil ...

34250
来自专栏申龙斌的程序人生

零基础学编程031:Python与其它语言最不同的一条语法规则

有C或JAVA其它编程语言基础的人可能对Python中的这条语法规则最不适应:Python中的缩进是有语法含义的,它用来表示一个代码块(code block)。...

32050
来自专栏图形学与OpenGL

CG实验6 交互与动画

(1) 示范代码1为交互实例:在鼠标点击的位置上绘制出点;示范代码2为动画实例:三角形按照恒定的速度(45度/秒)旋转。结合示范代码,学习理解交互与动画的基本思...

14410
来自专栏编程

Python读书笔记4

上期介绍了数字型数据,本期和大家分享的是另一个常见的数据类型字符串,可以简单的理解为Excel中的文本。 Excel在存储内核中其实只有两种:文本、数字;日期归...

25050
来自专栏hightopo

HT for Web基于HTML5的图像操作(二)

17420
来自专栏瓜大三哥

UVM(十二)之各register model续

UVM(十二)之各register model续 1. register model的必要性 假设有如下的DUT: ? 这个DUT相当的简单,它只有一个寄存...

26350
来自专栏HT

HT for Web基于HTML5的图像操作(二)

上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另...

29980
来自专栏专注 Java 基础分享

Java ---自定义标签(二)

     上篇文章的最后,我们自定义了一个带属性的标签,并使用它完成了一个简单的案例。其实到这我们已经可以看出来,前端jsp页面只需要写一个类似html语法的标...

22970
来自专栏java一日一条

Web性能优化系列:10个JavaScript性能提升的技巧

Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者,这本书值得每个程序员去阅读。

10520
来自专栏前端说吧

百度前端学院js课堂作业合集+分析(更新中...)

60690

扫码关注云+社区

领取腾讯云代金券