angular跨组件通讯

先单独写一个data.service.ts文件
代码如下

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';@Injectable({providedIn: 'root',
})
export class DataService {private eventBus: Subject<any> = new Subject();emitEvent(event: any) {this.eventBus.next(event);}getEvents() {return this.eventBus.asObservable();}
}

然后在需要发送信息的组件的地方这么写：

import { DataService } from './data.service';constructor(private dataService: DataService,) {
}getList(){// 调用完接口后另外一个组件需要改变状态，发送信息this.dataService.emitEvent('refresh');
}

在接收组件的地方这么写：

import { DataService } from './data.service';constructor(private dataService: DataService,) {
}ngOnInit() {// 订阅this.dataService.getEvents().subscribe(event => {console.log('Received event:', event);});}

如果就写这些，界面运行会报错，还需要在引入两个组件的最外层module里面providers里面添加一下

import { DataService } from '.data.service';@NgModule({imports: [//引用不写了],declarations: [],exports: [],providers: [DataService],
})
export class AppModule {}