angular组件传值

作者: 小话001 | 来源:发表于2018-09-14 07:55 被阅读0次

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

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

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

申明 绑定 导入然后@Input接收 子组件引用

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

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

子组件的引入 实例化EventEmitter,引用然后广播 父组件的绑定,这里的outer和子组件定义的outer是同一个 父组件的方法,形参接收子传过来的数据

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

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

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

这是子组件TS页面的方法 这是父组件HTML页面引用子组件

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

   2.1传递过程

子组件TS页面定义方法和数据 父组件HTML引用 父组件TS页面

相关文章

  • 3.组件传值 - service传值

    angular 组件service传值 父子组件相互传值 子组件如果想返回去传值给父组件,父子组件相互传值需要使用...

  • angular2 组件之间传值及事件传递

    简介 angular2及以后的版本(包括angular4)都称为angular。组件之间的传值主要分为父子组件间传...

  • angular组件传值

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

  • 初识Angular2的组件通信

    Angular2中免不了进行父子组件的通信,现在就稍微的了解一下父组件怎么给子组件传值,首先,通过Angular-...

  • angular4 子组件向父组件通信

    之前我写过 父组件向子组件通信 :《angular4 父组件向子组件通信传值》https://www.jiansh...

  • Angular6中出现的父子组件通信问题

    Angular6中出现的父子组件传值,和父组件调用子组件方法出现的子组件获取不到父组件实时数据问题。场景:父组件传...

  • angular父子组件之间的传值

    父子组件的传值,是mvvm框架中必然绕不过去的话题,下面列举在angular中父子组件传值的各种方式。 一、通过输...

  • angular@Input用法

    使用angular一周,组件传值和react不同,因此整理如下,以备后查! @Input是angular提供给父元...

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • 组件之间的传值

    组件之间的传值,包括父子组件传值,兄弟组件之间的传值,其中父子组件包括父组件向子组件传值和子组件向父组件传值,现在...

网友评论

    本文标题:angular组件传值

    本文链接:https://www.haomeiwen.com/subject/vfdwwftx.html