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（humidityWarning）时，我会得到一个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);

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

1 个答案: