Базовое государственное управление с помощью Rxjs на Angular

Question

Я пытаюсь реализовать управление состоянием на основе Rxjs в Angular, но я застрял в том, чтобы поделиться состоянием с компонентами.Вот моя реализация;

    private readonly _policies = new BehaviorSubject(<Policy[]>([]));

    readonly policies$ = this._policies.asObservable();

    get policies(): Policy[] {
        return this._policies.getValue();
    }

    set policies(val: Policy[]) {
        this._policies.next(val);
    }

    async fetchAll() {
        this.policies = await this._policyService.index().toPromise();
    }

    async delete(policyId: string): Promise<any> {
        try {
            await this._policyService
                .destroy(policyId)
                .toPromise();

            this.policies = this.policies.filter(policy => policy.id !== policyId);

        } catch (e) {

        }
    }

В компоненте оболочки я просто передаю переменные дочернему компоненту;

    <policy-list
       [policies]="_policyStoreService.policies$ | async"
      (deletePolicyEmitter)="_policyStoreService.delete($event)">

FetchAll вызывается в resolver;

    resolve(route: ActivatedRouteSnapshot): any {
        return this._leavePolicyStoreService.fetchAll();
    }

Я хочу сохранить _policyStoreService.policies$ в качестве общего наблюдаемого в моих компонентах.Поэтому, когда я добавляю / удаляю / обновляю политику, нажимаю это изменение всем подписчикам.Используйте сервис также в отложенных загрузочных модулях и извлекайте данные из API только в том случае, если они не были загружены ранее.

Вопрос в том, как использовать этот сервис хранилища в качестве одноэлементного сервиса.Я уже удалил из поставщиков отложенной загрузки модуля и вставил @Injectable ({обеспеченный в: 'root'}) в его метаду.Но все равно получаю ошибку внедрения.

Решение: я только что добавил метаданные {обеспечитьIn: 'root'} к служебным зависимостям.

Answer 1

Вы можете использовать простой предмет RXJS в вашем сервисе:

1. В вашем сервисе:

   stateChanges: Subject<any> = new Subject<any>();
   

2. В ваших компонентах, гдевы хотите выдать новое событие наблюдаемой:

   this.yourService.stateChanges.next('Data to emit');
   

3. В компонентах, когда вы хотите прослушать новые события:

   this.yourService.stateChanges.subscribe(data => console.log(data));
   

** ВАЖНО: не забудьте отписаться от наблюдаемой