Angular父子组件互相传值

Angular父子组件互相传值

1、Angular父组件传值到子组件

我们在这里定义了一个home组件作为父组件，header为子组件

1、首先，我们需要在app.component.html中引入home组件

2、其次，我们在home中写一个要传到子组件的属性

3、在home组件中引入header组件，并给其属性绑定。

在header组件引入时记得

4、在header组件中打印

结果如下：

除此之外，父子组件之间还能传方法

1、在home组件中定义run方法

2、在子组件中引入

3、header组件中定义一个方法来接收

2、Angular子组件传值到父组件

1、在header组件中定义数据

2、在home组件中引入header组件，给其设置一个id，并设置一个按钮

3、引入ViewChild模块，绑定id，执行方法
效果图：