8月6日无法同时从多个组件订阅主题

时间:2019-04-25 11:14:58

标签: angular subject-observer

我有两个组件(父项和子项)和一项服务,它们同时订阅了一个主题类。但是当主题类使用next方法发出数据时,只有一个组件(子组件)正在获取数据。

navbar.component.ts :(发送方):

this.messageService.setClientUserAuth(this.respObject.details.actionDtls);

message.service.ts :(订阅者)

constructor(private route: Router, private _rest: RestApiService) {
  this.getClientUserAuth().subscribe(auth => {
    console.log('AUTH :' + JSON.stringify(auth));
  });
}
setClientUserAuth(id: any) {
   this.clientUserAuth.next(id);
}

getClientUserAuth(): Observable<any> {
   this.clientUserAuth = new Subject<any>();
   return this.clientUserAuth.asObservable();
}

base-template.component.ts :(订阅者)(子)

ngOnInit() {

  this.messageService.getClientUserAuth().subscribe(auth => {
    console.log('------------>' + JSON.stringify(auth));
  });
}

action.component.ts(订阅者)(父母)

constructor(private _rest: RestApiService, private messageService: MessageService,
          private route: Router, private modalService: NgbModal, notifier: NotifierService) {
this.messageService.getClientUserAuth().subscribe(auth => {
  console.log('----::----->' + JSON.stringify(auth));
});
}

当数据来自导航栏组件时,只有基本模板subscription函数获得了数据,但是如果我从基本模板中删除了subscription方法,那么动作组件中的subscription方法就会得到它。但是我希望所有组件和服务中的数据都在同一时间呈现,因为它们是同时呈现的。如何实现这一目标。

1 个答案:

答案 0 :(得分:3)

修改服务方法,从方法“ getClientUserAuth()”中删除主题的初始化,在定义它的位置初始化可观察对象(也可能是要使其私有):

private _clientUserAuth = new Subject<any>();
getClientUserAuth(): Observable<any> {
   return this._clientUserAuth.asObservable();
}

setClientUserAuth(id: any) {
   this._clientUserAuth.next(id);
}

每次任何组件在返回getClientUserAuth()时调用订阅时,您最终都会创建一个新主题。