angular 是组件化的框架，通过一个个组件来构成整个项目，所以组件之间的通讯是必不可少的，下面就分别说下父子组件通讯和中间人模式通讯的使用。
组件通讯之父子组件之间通讯
// parent.component.html
<h1>父组件</h1>
<app-child [value]="value" (valueEvent)="onValueEvent($event)"></app-child>// parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
value: string = '父组件传给子组件值123';
constructor() {}
ngOnInit() {}
// 监听到子组件传来的值
onValueEvent(value) {
console.log(value);
}
}// child.component.html
<h1>子组件</h1>
<div>父组件传过来的值：{{ value }}</div>
<button (click)="sendValueToParent()">点击发送值给父组件</button>// child.component.ts
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
@Input() value: string;
@Output() valueEvent = new EventEmitter;
constructor() { }
ngOnInit() {}
// 发送值给父组件
sendValueToParent() {
this.valueEvent.emit('传给父组件的值');
}
}组件通讯之中间人通讯
两个组件 A、B 之间需要通讯，但是不是父子组件，如果一层层传递会比较繁琐并难以维护。这时候就需要用到中间人通讯方式，即使用服务作为中间人在两个组件中传递消息，下面以一个鼠标经过移出的案例来介绍下中间人通讯的用法。
- 选择或者定义一个合适的服务并添加以下代码
// 鼠标经过及移出事件
hoverItemEvent:EventEmitter<any> = new EventEmitter();- A 组件充当消息传递的传递方
<div (mouseenter)="hoverItem(true)" (mouseleave)="hoverItem(false)">鼠标事件</div>import { DefaultService } from './services/default.service';
constructor(
private defaultService: DefaultService
) { }
hoverItem(event) {
this.defaultService.hoverItemEvent.emit(event);
}- B 组件充当消息传递的接收方
import { DefaultService } from './services/default.service';
constructor(
private defaultService: DefaultService
) { }
earthSubscribe: Subscription;
ngOnInit(): void {
// 订阅productService中发布的事件searchEvent
this.earthSubscribe = this.defaultService.hoverItemEvent.subscribe((val) => {
// 订阅到服务发布的事件后调用服务的search函数
console.log(val)
if(val) {
this.clearEarthTimer();
}else {
this.resetRotation(this.cesiumCamera)
}
})
}
// 销毁时
ngOnDestroy() {
this.earthSubscribe.unsubscribe();
}还有一种组件通讯的方式是通过状态管理，angular中的状态管理插件是ngrx，因为ngrx内容较多，所以这篇博客不展开，后面单独用一篇博客来讲解用法。
备注：定义一个Observable流变量
products$: Observable<Product[]>;
this.products$ = this.selectedTabLink$.pipe(
switchMap(tab => this.service.getProductsByTab(tab))
);
发表评论：