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

一:@Input方式(可以传值不传方法,父传子)

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

 

angular 父子组件通信

申明

angular 父子组件通信

绑定

angular 父子组件通信

导入然后@Input接收

angular 父子组件通信

子组件引用

 

       二:@Output方式(子组件调用父组件方法,调用的时候子可以传值给父组件)

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

 

angular 父子组件通信

子组件的引入

angular 父子组件通信

实例化EventEmitter,引用然后广播

angular 父子组件通信

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

angular 父子组件通信

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

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

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

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

 

angular 父子组件通信

这是子组件TS页面的方法

angular 父子组件通信

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

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

   2.1传递过程

 

angular 父子组件通信

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

angular 父子组件通信

父组件HTML引用

angular 父子组件通信



 

相关文章:

  • 2021-10-24
  • 2021-10-07
  • 2022-01-14
  • 2021-10-11
  • 2021-11-13
  • 2022-12-23
猜你喜欢
  • 2021-05-08
  • 2022-12-23
  • 2022-12-23
  • 2021-09-28
  • 2022-02-02
  • 2021-11-14
  • 2022-12-23
相关资源
相似解决方案