Как активировать подписчика rxjs в одном компоненте из другого углового компонента?

Question

у компонента А есть подписчик myService getData наблюдаемый. Компонент B имеет кнопку. Я хочу, чтобы после нажатия этой кнопки появлялись следующие операции:

1. myService позвонит на сервер и получит данные;

2. подписчик компонента А будет обрабатывать эти данные.

Я попробовал следующий код:

(MYSERVICE)

getData(): Observable<IData> {
    return this.http.get<IData>(apiUrl);
}

(Componenta)

ngOnInit() {
    this.myService.getData().subscribe(response => console.log(response));
}

(componentB)

public onClick(): void {
    this.myService.getData();
}

Когда я нажимаю кнопку в ComponentB, подписчик в ComponentA ничего не делает. Как активировать абонента в ComponentA после нажатия кнопки в ComponentB?

Answer 1

Вы не определили отношения между двумя компонентами A и B.И я думаю, что вы хотите подписаться на услугу в A, когда кнопка нажата в B. Если B является дочерним элементом A, то вы можете использовать EventEmitter в дочернем элементе, чтобы генерировать событие при нажатии кнопки, обрабатывать его в родительском и затем подписываться в этом обработчике, нотогда вы не можете подписаться в хуке жизненного цикла ngOnInit в A (вы можете подписаться только в обработчике).A: Шаблон

<app-bcomponent (dataEmmiter)="handler($event)"><app-bcomponent>

A: Ts:

handler(e){
 this.myService.getData().subscribe(response => console.log(response));}

B: Ts

@Output
dataEmmiter: EventEmitter<any> = new EventEmitter<any>();

    getData(): Observable<IData> {
this.dataEmmiter.emit(anydata);
    return this.http.get<IData>(apiUrl).subscribe(data=>{
//Do what u want
});
}

Answer 2

вы можете установить эмиттер в вашем сервисе, а когда вы нажимаете кнопку в компоненте B, эмитировать данные и использовать подписчика в компоненте a для подписки данных из сервиса;

это примерно так:

 public dataEmmiter: EventEmitter<any> = new EventEmitter<any>();

    getData(): Observable<IData> {
    return this.http.get<IData>(apiUrl).subscribe(data=>{
this.dataEmmiter.emit(data);
});
}

компонент а

ngOnInit() {
    this.myService.getData().subscribe(response => console.log(response));
}

Answer 3

Проблема в том, что вы создаете новый наблюдаемый экземпляр в обработчике onClick (comp B), который не имеет ничего общего с тем, который создан в ngOnInit (Comp A). ​​

Сделайте это вместо этого в вашем сервисе:

public data$: Observable<IData>;

    constructor() {
        this.data$ = this.http.get<IData>(apiUrl).pipe(
           shareReplay(1)
        );
    }

В компоненте B:

public onClick(): void {
    this.myService.data$.subscribe(
// Any code to execute when data is received
);
}

Затем, где бы вы ни хотели получить доступ к извлеченным данным, используйте myService.data $.Оператор shareReplay гарантирует, что операция http fetch будет выполняться только один раз, независимо от того, на сколько раз подписаны данные $.