Question

我面临着如何在库（角度）中正确实现可观察对象以成为api的问题。

该库显示一个div，其中包含一些文本。在库的组件内部，有一个布尔值，用于显示div html元素。我想基于要向用户公开的布尔值构建一个可观察对象，以便让他们知道div是否显示并执行操作。

在项目内部，我创建了一个在bolean上可观察的服务。在div的组件内部，我正在导入该服务，并且当存在布尔值true或false时，我将该值设置为服务的功能。我正在使用rxjs（安静易用）。.

//建立库并将其实现在一个有角度的项目中：


private Boolean: BehaviorSubject<boolean>;

export class getDivStatus {
public getTheBoolean(): Observable<boolean> {
    return this.theBoolean.asObservable();
}

public setTheBoolean(newValue: boolean): void {
    this.theBoolean.next(newValue);
}
}

My component

...
import {getDivStatus } from /getDivStatus.service.ts
...

export class divCom implement oninit {
constructor(private divservice: getDivStatus)
ngOnInit() {
booleanDiv = true;
this.divservice.setTheBoolean(true);

if(anotehrcondition) {booleanDiv = false; this.divservice.setTheBoolean(false);}

}

在另一个项目中，在建立库之后，我想订阅这些事件，但是我不知道该如何实现。有什么更好的方法或适当的方法可以做到这一点？

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 components

...

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

用库以角度展示Observable

1 个答案: