使用库以角度暴露 Observable

Question

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

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

在项目内部，我创建了一个在 bolean 上使用 observable 的服务。 在 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);}

}

// 构建库并在 Angular 项目中实现它：

app.compoennt.ts

import {librarytotest} from librarytotest;

@compoennt({
...})

export class AppCompoet implements oninit{
ngoninit() {
this.librarytotest.getboolean().subscribe({x => console.log(x)});

}
}

在另一个项目中，在建立库之后，我想订阅这些事件，但我不知道如何实现。 有什么更好的方法或正确的方式来实现呢？

Answer 1

如果我正确理解了目标，我认为下面的服务是一个很好的示例，说明如何创建一个服务，该服务公开一个可观察对象并将 Behavior Subject 实现为观察者和可观察对象。我可以将此服务作为输入注入到多个组件中，并在其他需要观察更改的组件中订阅该服务。此示例用于管理应用程序状态。我使用接口的实现来设置可观察类型，但布尔值也可以。

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