Экспонирование Observable в угловых с библиотекой - PullRequest
Новая
       19

Экспонирование Observable в угловых с библиотекой

0 голосов
/ 16 мая 2019

Я сталкиваюсь с проблемой правильной реализации наблюдаемой в библиотеке (угловой) для API.

Библиотека отображает div с текстом внутри. Внутри компонента библиотеки есть логическое значение, которое я использую для отображения элемента div html. Я хочу построить наблюдаемое на основе этого логического значения, которое будет доступно для пользователя, чтобы дать им знать, отображается ли div или нет, и делать что-то.

Внутри проекта я создал сервис, который потребляет наблюдаемый на боле. Внутри компонента 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);}

}

// Сборка библиотеки и ее реализация в угловом проекте: 

app.compoennt.ts

import {librarytotest} from librarytotest;

@compoennt({
...})

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

}
}

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

1 Ответ

0 голосов
/ 16 мая 2019

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

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