博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular学习:组件通信
阅读量:4610 次
发布时间:2019-06-09

本文共 691 字,大约阅读时间需要 2 分钟。

一、父组件给子组件传值@input

  父组件不仅可以给子组件传递简单的数据,还可以把自己的方法及整个父组件传给子组件。

  (1).父组件调用子组件的时候传入数据

  

  

  (2).子组件引入Input模块

  

  (3).子组件中@Input接收父组件传过来的数据

  

  如果要将整个父组件传给子组件,可以把this传过去

  

  如果父组件有haha属性,可以在子组件里直接使用this.home.haha获取数据

    

二、父组件通过@ViewChild()主动获取子组件的数据和方法

  (1).父组件调用子组件,子组件设置模板引用变量

  

  (2).父组件引入ViewChild模块,通过@ViewChild("footer",{static:true}) footer:any;获取子组件,此时footer就是子组件,通过this.footer.run()就可以调用子组件的run()方法。

  

三、子组件通过@Output触发父组件的方法及广播数据

  (1).子组件引入Output、EventEmitter模块

  

  

  $event就是"我是子组件的数据"

  

  

四、非父子组件传值

 1.service

 2.Rxjs

 通过service通信

  (1).创建服务

  

  

   (2).header组件,设置要传给footer组件的数据

  

  (3).footer组件,获取header组件传递的数据

  

转载于:https://www.cnblogs.com/crackedlove/p/11555407.html

你可能感兴趣的文章
Hadoop 使用Combiner提高Map/Reduce程序效率
查看>>
前言 转录组
查看>>
局域网内访问机器时出现“未授予在次计算机上的请求登陆类型”
查看>>
Bogart BogartAutoCode.vb
查看>>
hdu - 2266 How Many Equations Can You Find (简单dfs)
查看>>
UIView属性
查看>>
将博客搬至CSDN
查看>>
远程服务器git搭建
查看>>
牛人们的博客地址
查看>>
Zabbix是什么?
查看>>
源码:COCO微博
查看>>
面向对象预习随笔
查看>>
大数据概念炒作周期模型
查看>>
排序模型
查看>>
Dede推荐文章与热点文章不显示?
查看>>
React 3
查看>>
Topshelf 使用
查看>>
Linux --Apache服务搭建
查看>>
20145325张梓靖 实验三 "敏捷开发与XP实践"
查看>>
JavaScript面试题
查看>>