如何通过简单的代码描述Angular父组件、子组件传值

引言

对于稍微接触过Angular组件的同学来说，组件间交互应该没有什么问题。

本文想追求的是用一个通俗解释，帮助自己理解的更准确。

零、知识铺垫

CSS选择器

在介绍父子组件之前，先要了解一个概念——selector、选择器

我们定义一个新组件时，一定会有这个属性：

@Component({ selector: 'app-village-edit', ① templateUrl: './village-edit.component.html', styleUrls: ['./village-edit.component.scss'] })

其中①就是选择器，就是告诉别的组件，如果想调用我这个组件，就要使用本组件的选择器来调用。

本质上就是定义了组件的HTML标签，就像常见的

标签、标签一样。

一、什么是父子组件

就像现实中父母和孩子的关系是相对的一样，一个人对于它的父母来说，就承担了孩子的角色；对于它的孩子来说则承担了父母的角色。

父组件和子组件也是相对的。

假设，一个组件在自己的HTML模板中，通过选择器（也就是特定的HTML标签）来调用其他组件时。我们称这个组件为父组件，而那个被调用的组件称为子组件。

二、父组件调用子组件的方法

定义了两个类：

child.component.ts，它的选择器selector是: 'app-child'

parent.component.ts，它的选择器selector是: 'app-parent',

此时，在parent组件的HTMl中引用child组件的选择器：

这样就完成了子组件的调用。
此时，如果通过路由加载父组件，就会发现子组件也会在特定的位置被渲染出来。

三、父组件向子组件传值

子组件使用@input装饰器接收数据

子组件从父组件接收的值，会保存到子组件的变量中。

所以用来接收传值的变量与普通变量唯一的区别，就是在常规的变量上增加一个@input()注解。

定义普通变量是这样的：

master = 'Master';

如果用来接收传值，只要改成这样：

@Input() master = 'Master';

这样，master变量默认是'Master'字符串。

但如果父组件向其传值，变量就变成了接收的值。

父组件使用方括号[]发送数据

常规方式调用子组件：

如果子组件可以接收数据，就可以用[propertyName] = value的方法来传值。
例如：

用这种写法可以实现：一旦组件渲染完成后，子组件中的master变量就是'hero'的值了。

当父组件中的变量值变化时，子组件也会同步变化，也就是说，子组件可以监听传过来的值的变化信息。

升级：子组件通过set方法监听传入数据变化

在上面的方式中，对于传过来的值，虽然可以监听变化，但局限在于：子组件只能直接使用传入的值。

如果想对传入的值进行处理或过滤，就要稍微调整一下子组件。

常规情况下，子组件是通过给变量加上@Input装饰器来接收参数的：

@Input() name = 'name';

如果想处理参数，只需要把接收传值的变量变成set方法即可：

@Input() get name(): string { return this._name; } set name(name: string) { // 此处可以增加其他处理逻辑 this._name = name; } private _name = '';

此时，_name是内部变量，当父组件对于name属性传入值的时候，会自动执行set name方法给_name赋值并增加其他的处理逻辑。

另一种升级：子组件通过ngOnChanges()生命周期钩子监听传入数据变化

官方文档中写到：“当需要监视多个、交互式输入属性的时候，ngOnChanges()比用属性 setter 方法更合适。”

常规情况下，子组件是通过给变量加上@Input装饰器来接收参数的：

@Input() param1 = 'string1'; @Input() param2 = 'string2';

当我们要监听多个变量的变化并做出反应时，可以用ngOnChanges()方法：

@Input() param1 = 'string1'; @Input() param2 = 'string2'; ngOnChanges(changes: SimpleChanges) {  ① for (const propName in changes) {  ② // 通过变量名获取变化信息 const changedProp = changes[propName]; // 获取上一个值 const from = JSON.stringify(changedProp.previousValue); ③ // 获取当前值 const to = JSON.stringify(changedProp.currentValue);     ④ // 此处可以添加其他处理过程了 ⑤ } }

① 执行ngOnChanges()方法时，可以用一个SimpleChanges参数来获得当前组件所有参数的变化情况。

② 通过循环获得每一个参数的上一个值和当前值。

③ 获得上一个值④ 获得当前值⑤ 根据业务逻辑添加其他处理过程

注：由于ngOnChanges方法调用非常频繁，会导致性能问题或者软件崩溃，所以建议少用。

四、子组件向父组件传值

子组件向父组件弹射事件

刚刚讲到了子组件如何获取父组件的传入的变量，如何监听父组件的变化，以及如何处理传入的值。

接下来讲反向的传输：父组件如何监听子组件的变化，并做出反应。

定义普通变量是这样的：

param1 = 'String1';

如果想把这个变量暴露给父组件，需要在变量前加入@output()装饰器，并且给他赋值一个变量弹射器：

@Output() param1 = new EventEmitter();

此处EventEmitter是变量弹射器，EventEmitter需要一个确定的类型。

但此时，这个param1变量就不能再用等号"="赋值了，如果想让父组件监听到变化，就需要用弹射方法.emit：

this.param1.emit("String2");

接下来前往父组件。

父组件监听子组件弹射的事件

刚刚已经在子组件设置好了暴露的变量，那么父组件如何接收呢？

常规的父组件调用子组件：

如果想监听子组件的某个变量，可以使用圆括号()：

$event 是Angular内置的事件变量。

function1我们在父组件中定义的处理变化的方法。

使用方式如下：

function1(param2: boolean) { // 这个param2为我们自己定义的参数名， // 本质上是子组件中变化的param1参数，但不用和子组件中的参数名相同 // 在此处增加处理过程即可 }

此时，当param1的值发生变化，就会执行function1，并且传入一个事件，事件的实质内容就是子组件定义的param1参数。

function1方法把参数作为param2接收，并添加处理过程。

五、总结

• Angular中，在HTML通过selector选择器调用的组件称为子组件。
• 父组件向子组件传值使用方括号[]
• 子组件有两种方式接收值： @input + 变量名、@Input + set方法
• 子组件想父组件传递事件使用EventEmitter
• 父组件接收事件使用圆括号()，并声明一个处理方法用来调用

熟悉的风格，一图胜千言：

六、后记

是不是有似曾相识的感觉，在刚开始接触Angular时就知道，可以使用方括号[]来绑定原生HTML标签的某些属性，例如：

 You can set my color in the component! 

另一方面，还有一个相似之处就是，Angular中也是使用圆括号()来绑定原生HTML标签的某个方法，例如：

点我！