先单独写一个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 {}
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐