我想发送一个可观察的 2 个父组件。我该怎么做？我需要使用 EventEmitter 吗？

Question

我有一个页面组件、一个列表组件和一个详细信息组件（父级到子级层次结构：page->list->detail），我试图通过组件在详细信息组件中获取一个可观察到的页面组件分享。

我尝试通过将 observable 放入 EventEmitter 并将其向上发送来做到这一点，但是，它似乎不起作用。它可能是以下两种情况之一：我错误地发送了 observable，或者我正确地发送了 observable 并且我错误地从 EventEmitter 中提取了它。代码看起来像这样。

详细组件：

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

湿度警告$ 的类型为 Observable

列表组件模板：

<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(humanityWarning) 我会得到一个 EventEmitter

Answer 1

我可能误解了您的目标，但我以不同的方式完成了类似的组件通信。例如，考虑可能需要在多个组件之间共享的应用程序状态。

我通常创建一个服务，该服务公开一个 observable 并将 Behavior Subject 实现为观察者和 observable。然后我可以将服务注入到像你的子组件这样的组件中作为输入，并在其他需要观察的组件中订阅服务，比如你的父组件。我通常使用接口在服务中定义具有已定义类型的 observable 来保留它。

这是我创建的一个示例，用于管理由各种组件更新的搜索参数。

服务：

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);