angular 父子组件通信

父子组件通信传值的方式有三种：@Input,@Output,@ViewChild。按照顺序来分享各自的不同：

一：@Input方式（可以传值不传方法，父传子）

        1，传值。我总结为:申明---绑定---导入（接收）---引用,前面两步是在父组件完成，后面两步是在子组件完成。

 

申明

绑定

导入然后@Input接收

子组件引用

 

       二：@Output方式（子组件调用父组件方法，调用的时候子可以传值给父组件）

        过程是：子：导入----实例化---引用——父：绑定-----有函数执行。如图：

 

子组件的引入

实例化EventEmitter，引用然后广播

父组件的绑定，这里的outer和子组件定义的outer是同一个

父组件的方法，形参接收子传过来的数据

三：子传父(父组件主动获取子组件的数据和方法)

1，父组件直接调用子组件方法，非通过调用父组件自己的方法。(一般只传方法)

      方法的传递过程：子组件申明方法——父组件调用子组件的过程中直接命名调用

 

这是子组件TS页面的方法

这是父组件HTML页面引用子组件

2，父组件间接调用子组件方法，通过调用父组件自己的方法来实现。(可传方法，数据)

   2.1传递过程

 

子组件TS页面定义方法和数据

父组件HTML引用