## 前言在前端框架Angular中，组件之间的通信很基础也很重要，不同组件间的通信方式也不同，掌握组件间的通信方式会更加深刻的理解和使用Angular框架。本文讲解不同类型组件间的不同通信方式，文中所有示例均提供源码，您可以 **[在线编辑预览](https://stackblitz.com/edit/echeverra-angular-component-communication)** 或 **[下载本地调试](https://github.com/echeverra/angular-component-communication)**，相信通过本文您一定可以掌握组件通信这一知识点。 ## 父组件传子组件 ### @Input方式 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f48255b489764abaa4aa53d8ef8726da~tplv-k3u1fbpfcp-zoom-1.image) `@Input()`装饰器允许父组件更新子组件中的数据，分为4步：第一步：在父组件`app.component.ts`中定义要传递给子组件的数据`parentMsg`。 ``` export class AppComponent { parentMsg: string = 'parent component message!'; } ``` 第二步：在父组件`app.component.html`中的子组件标签``中定义属性`[childMsg]`（子组件接收数据变量）来绑定父组件的数据`parentMsg`。 ``` ``` 第三步：在子组件`child.component.ts`中引入`@Input()`装饰器，修饰`childMsg`接收父组件的传值。 ``` import { Input } from '@angular/core'; export class ChildComponent { @Input() childMsg: string = ''; } ``` 第四步：在子组件`child.component.html`中通过模板标签`{{childMsg}}`展示数据。 ```

父组件传值内容：{{ childMsg }}

``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/800dae1af3c243409e0bb5cd211fbed9~tplv-k3u1fbpfcp-zoom-1.image) **说明**：这里要理解父组件html中通过`[]`定义了一个子组件的属性，该值必须与子组件中所定义的变量名一致，而等号右边的值为父组件要传递的属性名，示例中是将父组件中`parentMsg`的值绑定在子组件`childMsg`属性上。 ## 子组件传父组件 ### @Output()方式 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9db600c4a7764055b545ae4913965a2d~tplv-k3u1fbpfcp-zoom-1.image) `@Output()`装饰器允许数据从子组件传给父组件，分为6步：第一步：在子组件`child.component.ts`中引入`Output`和`EventEmitter`，通过`@Output()`来修饰一个`EventEmitter`实例的变量`newItemEvent`。 ``` import { Component, Output, EventEmitter } from '@angular/core'; export class ChildComponent { @Output() newItemEvent = new EventEmitter(); } ``` 第二步：在子组件`child.component.html`中添加点击事件，获取输入内容，点击按钮触发`addNewItem()`方法。 ``` 输入项目名： ``` 第三步：在子组件`child.component.ts`中通过`newItemEvent`的`emit()`方法，把数据发送到父组件。 ``` export class ChildComponent { @Output() newItemEvent = new EventEmitter(); addNewItem(value: string) { this.newItemEvent.emit(value); } } ``` 第四步：在父组件`app.component.html`中子组件标签``中添加父组件方法`addItem($event)`绑定到子组件的`newItemEvent`发射器事件上，其中`$event`为子组件的传递的值。 ``` ``` 第五步：在父组件`app.component.ts`中通过`addItem($event)`方法获取处理数据。 ``` export class AppComponent implements AfterViewInit { items = ['item1', 'item2', 'item3']; addItem(newItem: string) { this.items.push(newItem); } } ``` 第六步：在父组件`app.component.html`中遍历`items`展示数据。 ```

{{ item }}

``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4efa14c1392246bdb974535f114db414~tplv-k3u1fbpfcp-zoom-1.image) **说明**：这里要理解关键的第四步事件连接`(newItemEvent)="addItem($event)"`含义，左侧是父组件监听子组件创建的一个发射器`newItemEvent`，右侧是父组件的`addItem($event)`方法。子组件通过发射器的`emit(value)`方法广播传递值到父组件，父组件通过`addItem($event)`中的`$event`接收传值，完成通信。 ### 本地变量方式在父组件模板里，新建一个本地变量来代表子组件，可以利用这个变量来读取子组件的属性和调用子组件的方法。分为2步：第一步：在子组件`child.component.ts`中定义`count`变量和`addOne()`方法。 ``` export class ChildComponent { count: number = 0; addOne() { this.count++; } } ``` 第二步：在父组件`app.component.html`中子组件标签``中添加本地变量`#child`，点击按钮触发点击事件，通过本地变量调用子组件方法`child.addOne()`。 ``` ``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6404505aeea24bde8fe2f95957a5ef5d~tplv-k3u1fbpfcp-zoom-1.image) **说明**：在子组件标签中通过`#+变量名`的方式新建一个本地变量代表子组件的引用。本地变量方式使用简单明了，但也有局限性，只能在模板html中使用，无法在ts文件中使用。 ### @ViewChild方式通过`@ViewChild`装饰器，将子组件注入到父组件。分为4步：第一步：在子组件`child.component.ts`中定义`count`变量和`add()`方法。 ``` export class ChildComponent { count: number = 0; add(num: number) { this.count = this.count + num; } } ``` 第二步：在父组件`app.component.html`中子组件标签``中添加标签引用`#child`，点击按钮触发点击事件，执行方法`add()`。 ``` ``` 第三步：在父组件`app.component.ts`中引入`ViewChild`，`@viewchild`传入标签引用字符`child`，由变量`child`接收。除了使用标签引用`child`，你也可以通过直接传入子组件`ChildComponent`实现子组件的引用。 ``` import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './child/child.component'; export class AppComponent { // 第一种方法：传入组件引用名child @ViewChild('child') private child: any; // 第二种方法：传入组件实例ChildComponent @ViewChild(ChildComponent) private child: ChildComponent; } ``` 第四步：在父组件`app.component.ts`中方法`add()`中调用子组件的`add()`方法。 ``` export class AppComponent { add(num: number) { this.child.add(num); } } ``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25fff3b170c24a37b7dfbd4d820f83e1~tplv-k3u1fbpfcp-zoom-1.image) **说明**：`@ViewChild`的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到`@ViewChild`容器中，你可以想象成依赖注入的方式注入，只不过`@ViewChild`不能在构造器`constructor`中注入，**因为`@ViewChild()`会在`ngAfterViewInit()`回调函数之前执行**，我们可以测试下： ``` import { Component, ViewChild, AfterViewInit } from '@angular/core'; import { ChildComponent } from './child/child.component'; export class AppComponent implements AfterViewInit { @ViewChild('child') private child: any; constructor() { console.log('constructor func', this.child); // undefined } ngAfterViewInit() { console.log('ngAfterViewInit func', this.child); } } ``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/302199dcfdcf40609c4fdf2a0fa6a557~tplv-k3u1fbpfcp-zoom-1.image) 通过打印结果我们可以看到在构造函数`constructor()`中，`this.child`的值为`undefined`，并没有注入到父组件，但在`ngAfterViewInit()`生命周期钩子中注入成功了。 ## 不相关组件对于不相关联的组件，我们会使用其他中间媒介的方式进行通信，以下不相关组件的通信方式仍适用于父子组件。 ### service服务方式组件间共享一个service服务，那么组件之间就可以通过service实现通信。示例中我们使用`rxjs`中的`BehaviorSubject`，它是`Subject`的一种变体，可以存储最后一条数据或者初始默认值，并会在订阅时发送其当前值。您可以通过[RxJS官网](https://rxjs.tech/api/index/class/BehaviorSubject)进行了解，当然通过文中的说明，您还是可以了解其具体实现的功能。我们创建两个不相关的组件`A`和`B`，组件`A`发布数据，组件`B`接收数据，通过服务文件`data.service.ts`进行关联实现。在公共文件目录下创建`service`服务文件`data.service.ts`，代码如下： ``` import { Injectable } from '@angular/core'; // 1.引入 import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class DataService { // 2.创建subject subject: BehaviorSubject = new BehaviorSubject(0); constructor() {} } ``` 引入`BehaviorSubject`，创建一个`BehaviorSubject`, 默认值设为`0`。记得在`app.module.ts`文件中引入公共`data.service.ts`文件，并声明。 ``` import { DataService } from './data.service'; @NgModule({ providers: [DataService], }) export class AppModule {} ``` 创建组件`A`，用于发布数据，`a.component.ts`实现代码如下： ``` import { Component } from '@angular/core'; // 1. 引入 import { DataService } from '../data.service'; @Component({ selector: 'app-a', templateUrl: './a.component.html', }) export class AComponent { // 2. 注册 constructor(public dataService: DataService) {} inputValue: string = ''; send(): void { // 3. 发布 this.dataService.subject.next(this.inputValue); } } ``` 引入`service`文件，在`constructor()`中注入服务依赖`dataService`，使用服务中`subject`的`next()`方法发布广播数据。创建组件`B`，用于接收数据，`b.component.ts`实现代码如下： ``` import { Component } from '@angular/core'; // 1. 引入 import { Subscription } from 'rxjs'; import { DataService } from '../data.service'; @Component({ selector: 'app-b', templateUrl: './b.component.html', }) export class BComponent { data: any; // 2. subscription subscription: Subscription; constructor(public dataService: DataService) { // 3. 订阅 this.subscription = this.dataService.subject.subscribe((data) => { this.data = data; }); } ngOndestry(): void { // 4. 取消订阅 this.subscription.unsubscribe(); } } ``` 引入`Subscription`，使用服务中`subject`的`subscribe()`方法创建一个订阅者，当组件`A`数据被发布后就可以接收到数据。最后在销毁时记得取消订阅，否则会导致泄露。最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf27810bbb834cc28d9a54a884f5c41c~tplv-k3u1fbpfcp-zoom-1.image) **说明**：示例中组件`A`和`B`都引入了同一个服务`service`，`service`服务则巧妙利用`BehaviorSubject`实现数据的发布和订阅，在两个组件中进行数据的通信，是不是没有想象的那么难~ ### 路由传参方式路由传参有多种方式，首先我们新建一个路由模块`app-routing.module.ts`，代码如下： ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { DetailComponent } from './detail/detail.component'; // 配置路由 const routes: Routes = [ { path: 'detail', component: DetailComponent }, { path: 'detail/:id', component: DetailComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} ``` 引入路由相关的`RouterModule`和`Routes`，引入跳转文章详情组件`DetailComponent`，配置好路由`routes`，当路径为`detail`或`detail/:id`时，会加载`DetailComponent`组件，其中`:id`为占位符，可以在组件`ts`文件中获取`id`值。创建好路由模块我们还需要在根模块`app.module.ts`中导入。 ``` import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [...], imports: [AppRoutingModule], providers: [DataService], bootstrap: [AppComponent], }) export class AppModule {} ``` 在`app.component.html`文件中添加``路由占位符，Angular框架会根据当前的路由器状态将不同组件动态填充它。配置完路由准备工作，我们来具体看下有哪些路由传参方式。 #### 路由路径传参路由路径中传参，链接形式为：`https://ip/detail/1`。在`app.component.html`中使用路由指令`routerLink`的方式在路由路径中传参。 ``` 1.文章1（路由路径中传参，链接：https://ip/detail/1） ``` 在`detail`组件`detail.component.ts`中使用当前路由对象`ActivatedRoute`获取路由传递的参数。 ``` import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', }) export class DetailComponent implements OnInit { id: any; constructor(private routeInfo: ActivatedRoute) {} ngOnInit() { // 获取路由参数方法 this.routeInfo.params.subscribe((params: Params) => { this.id = params['id']; }); } } ``` #### 查询参数传参查询参数中传参，链接形式为：`https://ip/detail?id=2`。在`app.component.html`中同样使用路由指令`routerLink`，在`queryParams`查询参数中传递数据。 ``` 2. 文章2（查询参数中传参，链接：https://ip/detail?id=2） ``` 在`detail`组件`detail.component.ts`中使用当前路由对象`ActivatedRoute`获取路由传递的参数。 ``` import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', }) export class DetailComponent implements OnInit { id: any; constructor(private routeInfo: ActivatedRoute) {} ngOnInit() { // 获取路由参数方法（params改为queryParams） this.routeInfo.queryParams.subscribe((params: Params) => { this.id = params['id']; }); } } ``` 仔细观察会发现，第一种路由路径中传参使用的是`this.routeInfo.queryParams`获取数据，而第二种查询参数中传参使用的是`this.routeInfo.queryParams`，一定要注意这个区别。 #### 路由配置传参除了在`app.component.html`中使用路由指令`routerLink`，我们还可以在`app.component.ts`文件中通过路由配置中传参。在`app.component.html`文件中绑定两个点击方法`toArticle3()`和`toArticle4()`。 ``` 3. 文章3（路由配置中传参，链接：https://ip/detail/3） 4. 文章4（路由配置中传参，链接：https://ip/detail?id=4） ``` 在`app.component.ts`文件中通过路由`Router`的`navigate()`方法实现跳转。 ``` import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { constructor(private router: Router) {} toArticle3() { // 路由跳转文章3 this.router.navigate(['/detail', 3]); } toArticle4() { // 路由跳转文章4 this.router.navigate(['/detail'], { queryParams: { id: 4 } }); } } ``` 虽然是通过路由配置传参跳转，但我们仍然可以发现，文章3和文章1的跳转链接一致，文章4和文章2的跳转链接一致，本质上也是路由路径传参和查询参数传参。所以在`detail.component.ts`中，接收路由参数的方法是一致的。 ``` import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', }) export class DetailComponent implements OnInit { id: any; constructor(private routeInfo: ActivatedRoute) {} ngOnInit() { // 文章3路由参数获取（params） this.routeInfo.params.subscribe((params: Params) => { this.id = params['id']; }); // 文章4路由参数获取（queryParams） this.routeInfo.queryParams.subscribe((params: Params) => { this.id = params['id']; }); } } ``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd420fa79d3d4b8ab90715a09561ffc0~tplv-k3u1fbpfcp-zoom-1.image) 这里需要说明下，在线示例中点击文章`url`并未发生改变，这是因为stackblitz工具机制的问题，你可以点击在线示例界面的`Open in New Tab`按钮，在单独页面打开可规避该问题。 **延伸**：示例中的获取路由参数都是使用`subscribe`参数订阅的方式，还有一种`snapshot`参数快照的方式。如获取文章1路由参数写法为：`this.id = this.routeInfo.snapshot.params['id'];`，获取文章2路由参数写法为：`this.id = this.routeInfo.snapshot.queryParams['id'];`，可以看到同样是`params`与`queryParams`的区别。 `snapshot`参数快照和`subscribe`参数订阅两者的区别在于，当路由地址不变的情况下，若参数变化，`snapshot`参数快照获取的参数值不变，`subscribe`参数订阅获取的参数值会变化。我们使用`snapshot`参数快照测试一下文章1和文章3，效果如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b48a006dff214ae28aaa589cf895d5f9~tplv-k3u1fbpfcp-zoom-1.image) 那么`snapshot`参数快照获取的参数为什么不发生变化了呢？这是由于第一次点击文章1跳转`detail`组件，`constructor()`和`ngOnInit()`会被调用一次，再次点击文章3，由于`detail`组件页面已经被创建了，`ngOnInit()`方法不会再次被调用，所以路由参数`id`依然保存着第一次被创建时候的值`1`。 ### LocalStorage方式当然你也可以使用本地存储这种比较通用的方式在组件间通信。创建`C`组件`c.component.ts`将数据存储到`key`为`cValue`的`localStorage`中，代码如下： ``` import { Component } from '@angular/core'; @Component({ selector: 'app-c', templateUrl: './c.component.html', }) export class CComponent { constructor() {} inputValue: string = ''; send(): void { // 存储数据 window.localStorage.setItem('cValue', this.inputValue); } } ``` 创建`D`组件`d.component.ts`获取`localStorage`中`cValue`的值。 ``` import { Component } from '@angular/core'; @Component({ selector: 'app-d', templateUrl: './d.component.html', }) export class DComponent { data: any; constructor() {} getValue() { // 获取数据 this.data = window.localStorage.getItem('cValue'); } } ``` 最终展示效果如下，您可以通过 [**在线示例**](https://stackblitz.com/edit/echeverra-angular-component-communication) 预览效果和编辑调试： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e8adf6d559c43e7a716bd44af148780~tplv-k3u1fbpfcp-zoom-1.image) **注**：这里没有使用`sessionStorage`存储是因为`localStorage`生命周期是永久的，而`sessionStorage`生命周期仅为当前标签页，如果两个组件分别在两个标签页，那么使用`sessionStorage`是无法实现通信的。 ### 服务端通信方式最后一种通信方式是借助后台传输数据，如`A`组件调接口发送数据`data`存储到后台，再由`B`组件调接口获取数据`data`，实现数据通信，这里就不做演示了。 ## 总结 Angular组件间的通信方式是多种多样的，对于不同情景我们可以采用合适的方式进行通信。本文每个示例的重点我都有详细的说明，并延展一些相关知识。示例都是我自己一点点亲手敲的，从0到1研究示例实现方案，虽然花费了很长时间，但加深巩固了知识，之前忽略的一些知识细节也得到了补充，建议大家在学习的同时最好也能动手实现。好啦，以上就是Angular组件间各种通信方式的所有内容，希望对你有所帮助，如有问题可通过我的博客或微信公众号[echeverra](https://echeverra.cn/code.jpg)联系我。你学“废”了么？（完） *** 文章首发于我的博客，原创文章，转载请注明出处。欢迎关注我的微信公众号 [echeverra](https://echeverra.cn/code.jpg)，一起学习进步！不定时会有资源和福利相送哦！ ***