视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
angular中不同组件间传值与通信方法分享
2020-11-27 20:05:24 责编:小OO
文档


本文主要介绍了angular中不同的组件间传值与通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

父子组件间参数与通讯方法

使用事件通信(EventEmitter,@Output):

场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件;

步骤:

  1. 子组件创建事件EventEmitter对象,使用@output公开出去;

  2. 父组件监听子组件@output出来的方法,然后处理事件。

代码:

使用@ViewChild和@ViewChildren:

场景:一般用于父组件给子组件传递信息,或者父组件调用子组件的方法;

步骤:

  1. 父组件里面使用子组件;

  2. 父组件里面使用@ViewChild获得子组件对象。

  3. 父组件使用子组件对象操控子组件;(传递信息或者调用方法)。

代码:

非父子组件参数传递与通讯方法

通过路由参数

场景:一个组件可以通过路由的方式跳转到另一个组件 如:列表与编辑

步骤:

  1. A组件通过routerLink或router.navigate或router.navigateByUrl进行页面跳转到B组件

  2. B组件接受这些参数

此方法只适用于参数传递,组件间的参数一旦接收就不会变化

代码

传递方式

routerLink

router.navigate

router.navigateByUrl

传参方传参之后,接收方2种接收方式如下:

snapshot

queryParams

使用服务Service进行通信,即:两个组件同时注入某个服务

场景:需要通信的两个组件不是父子组件或者不是相邻组件;当然,也可以是任意组件。

步骤:

  1. 新建一个服务,组件A和组件B同时注入该服务;

  2. 组件A从服务获得数据,或者想服务传输数据

  3. 组件B从服务获得数据,或者想服务传输数据。

代码:

消息服务模块

场景:这里涉及到一个项目,里面需要实现的是所有组件之间都有可能通信,或者是一个组件需要给几个组件通信,且不可通过路由进行传参。

设计方式:

  1. 使用RxJs,定义一个服务模块MessageService,所有的信息都注册该服务;

  2. 需要发消息的地方,调用该服务的方法;

  3. 需要接受信息的地方使用,调用接受信息的方法,获得一个Subscription对象,然后监听信息;

  4. 当然,在每一个组件Destory的时候,需要

代码:

这里的MessageService,就相当于使用广播机制,在所有的组件之间传递信息;不管是数字,字符串,还是对象都是可以传递的,而且这里的传播速度也是很快的。

下载本文
显示全文
专题