Я хочу отправить наблюдаемые до 2 родительских компонентов. Как бы я это сделал? Нужно ли использовать EventEmitter?

Question

У меня есть компонент страницы, компонент списка и компонент детализации (иерархия от родительского до дочернего: page-> list-> detail), и я пытаюсь получить наблюдаемое в компоненте детали вплоть до компонента страницы через компонентПоделиться.

Я пытался сделать это, поместив наблюдаемое в EventEmitter и отправив его вверх, однако, похоже, это не работает.Это может быть одна из двух вещей: я неправильно отправляю наблюдаемое вверх или я правильно отправляю наблюдаемое вверх и неправильно извлекаю его из EventEmitter.Код выглядит примерно так:

Деталь компонента:

@Output() outputHumidityWarning$ = new EventEmitter<Observable<boolean>>();
...
ngOnInit() {
  this.outputHumidityWarning$.emit(this.humidityWarning$);
}

Где влажность $ имеет тип Наблюдаемый

Шаблон компонента списка:

<app-detail (outputHumidityWarning$)="inputHumidityWarning($event)"</app-detail>

Компонент списка:

private humidityWarning = new Replaysubject<boolean>(1);
...
ngOnInit() {
  this.humiditywarning.subscribe(all => console.log(all));
}
...
inputHumidityWarning = function (humidityWarning) {
  this.humidityWarning = humidityWarning;
}

Я также пытался:

inputHumidityWarning = function (humidityWarning) {
  this.humidityWarning.next(humidityWarning);
}
...
inputHumidityWarning = function (humidityWarning) {
  this.humidityWarning.next(of(humidityWarning));
}

Нет ошибок, но я ничего не получу на консоли.Когда я получу console.log this.humidityWarning после его установки, я получу AnonymousSubject.Вот почему я попытался обернуть его из of ().Когда я console.log (влажность предупреждения) я получу EventEmitter

Answer 1

Возможно, я неправильно понимаю вашу цель, но я достиг аналогичного взаимодействия компонентов другим способом.Например, рассмотрим состояние приложения, которое, возможно, должно быть разделено между несколькими компонентами.

Обычно я создаю сервис, который предоставляет наблюдаемое и реализует Субъект поведения как наблюдатель и наблюдаемый.Затем я могу внедрить службу в такие компоненты, как ваш дочерний компонент, в качестве входных данных и подписаться на службу в других компонентах, которые необходимо отслеживать, например, в ваш родительский компонент.Я обычно определяю наблюдаемое в сервисах с определенным типом, используя интерфейс для его сохранения.

Вот пример, который я создал для управления параметрами поиска, которые были обновлены различными компонентами.

Служба:

import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { SearchParams, Filter } from '../components/searchParam/searchparams.entity';
import { ISearchParams } from '../components/searchParam/searchparams.interface';
import { parkDetails } from '../services/getParkDetails.service';


@Injectable()
export class searchParamStateService {
    private _searchParamSource: BehaviorSubject<ISearchParams>;
    searchParams: Observable<ISearchParams>;
    private dataStore: ISearchParams;

    constructor() {    
        this.dataStore = new SearchParams('', [],[],[]);
        this._searchParamSource = new BehaviorSubject<ISearchParams>(this.dataStore);
        this.searchParams = this._searchParamSource.asObservable();        
    }


    // called when the searchtextbox is updated in search component
    changeSearchString(searchString: string) {
        this.dataStore.SearchString = searchString;
        this._searchParamSource.next(Object.assign({}, this.dataStore));
    }


    setXYParams(lat, long) {  
        //console.log('searchparamstate.service setXYParams: ' + lat + '  ' + long);
        this.dataStore.SearchX = lat;
        this.dataStore.SearchY = long;
        this._searchParamSource.next(Object.assign({}, this.dataStore));

    }

}

Затем в компонентах я могу наблюдать или вносить вклад всостояние:

//inject service into component

...

searchstateService.data.subscribe(data => {
  //do what ever needs doing when data changes
})

...

//update the value of data in the service
searchstateService.changeSearchString('new search string);