位置: 编程技术 - 正文
推荐整理分享angular中不同的组件间传值与通信的方法(angular的ngif),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:angular implements,angular implements,angular implements,angular的ngclass,angular例子,angular ngchange,angular例子,angular使用,内容如对您有帮助,希望把文章链接给更多的朋友!
本文主要介绍angular在不同的组件中如何进行传值,如何通讯。主要分为父子组件和非父子组件部分。
父子组件间参数与通讯方法
使用事件通信(EventEmitter,@Output):
场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件;
步骤:
子组件创建事件EventEmitter对象,使用@output公开出去; 父组件监听子组件@output出来的方法,然后处理事件。代码:
使用@ViewChild和@ViewChildren:
场景:一般用于父组件给子组件传递信息,或者父组件调用子组件的方法;
步骤:
父组件里面使用子组件; 父组件里面使用@ViewChild获得子组件对象。 父组件使用子组件对象操控子组件;(传递信息或者调用方法)。代码:
非父子组件参数传递与通讯方法
通过路由参数
场景:一个组件可以通过路由的方式跳转到另一个组件 如:列表与编辑
步骤:
A组件通过routerLink或router.navigate或router.navigateByUrl进行页面跳转到B组件 B组件接受这些参数此方法只适用于参数传递,组件间的参数一旦接收就不会变化
代码
传递方式
routerLink
router.navigate
router.navigateByUrl
传参方传参之后,接收方2种接收方式如下:
snapshot
queryParams
使用服务Service进行通信,即:两个组件同时注入某个服务
场景:需要通信的两个组件不是父子组件或者不是相邻组件;当然,也可以是任意组件。
步骤:
新建一个服务,组件A和组件B同时注入该服务; 组件A从服务获得数据,或者想服务传输数据 组件B从服务获得数据,或者想服务传输数据。代码:
消息服务模块
场景:这里涉及到一个项目,里面需要实现的是所有组件之间都有可能通信,或者是一个组件需要给几个组件通信,且不可通过路由进行传参。
设计方式:
使用RxJs,定义一个服务模块MessageService,所有的信息都注册该服务; 需要发消息的地方,调用该服务的方法; 需要接受信息的地方使用,调用接受信息的方法,获得一个Subscription对象,然后监听信息; 当然,在每一个组件Destory的时候,需要代码:
这里的MessageService,就相当于使用广播机制,在所有的组件之间传递信息;不管是数字,字符串,还是对象都是可以传递的,而且这里的传播速度也是很快的。
标签: angular的ngif
本文链接地址:https://www.jiuchutong.com/biancheng/375866.html 转载请保留说明!友情链接: 武汉网站建设