angular跨组件通讯
如果就写这些,界面运行会报错,还需要在引入两个组件的最外层module里面providers里面添加一下。先单独写一个data.service.ts文件。
·
先单独写一个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 {}
更多推荐
所有评论(0)