angular组件传值服务器,Angular中不一样的组件间传值与通讯的方法

主要分为父子组件和非父子组件部分。app

父子组件间参数与通信方法this

使用事件通讯(EventEmitter，@Output)：spa

场景：能够在父子组件之间进行通讯，通常使用在子组件传递消息给父组件；.net

步骤：设计

子组件建立事件EventEmitter对象，使用@output公开出去；

父组件监听子组件@output出来的方法，而后处理事件。

代码：code

使用@ViewChild和@ViewChildren：router

场景：通常用于父组件给子组件传递信息，或者父组件调用子组件的方法；htm

步骤：对象

父组件里面使用子组件;

父组件里面使用@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，就至关于使用广播机制，在全部的组件之间传递信息；无论是数字，字符串，仍是对象都是能够传递的，并且这里的传播速度也是很快的。