Angular 中的状态管理，不使用库答案

【问题标题】：State Management in Angular without using LibrariesAngular 中的状态管理，不使用库
【发布时间】：2020-03-29 23:44:58
【问题描述】：

我在我的应用程序中使用数据表（使用材料数据表），我想构建一个简单的示例，在该示例中我保存过滤器的状态而不使用 NGRX 等库。

我的问题很小，此时不能使用整个库；我有什么方法可以做到这一点？

【问题讨论】：

使用standard angular service?如果你需要更多的东西，你不必使用 NGRX，还有很多其他的，涉及较少的状态插件（使用过 NGRX 并迁移到 NGXS.. 非常好）。

标签： javascript angular typescript rxjs angular7

【解决方案1】：

这是一个很好的解决方案，使用 rxjs-observable-store，商店的状态是一个 BehaviorSubject，你可以在你的组件中订阅状态更新

this.store.state$.subscribe(state => {
  // Logic to execute on state update
});

或使用

this.store.state;

【讨论】：

【解决方案2】：

你可以使用 rxjs 拥有简单的状态服务

import { BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class StateService {
    private _state$ = new BehaviorSubject({});

    dispatchUserLoggedStatus(status) {
        this._state$.next({
            ...this._state$.value,
            isLogged: status
        });
    }

    get state$() {
        return this._state$.asObservable();
    }
}

使用库的重点是当您需要额外的功能时

【讨论】：

【解决方案3】：

超级简单的状态实用程序可以如下所示。

this.state = {}
this.setState = (key,value) => this.state={...this.state,key:value}

你可以把它放在一个单一的共享服务中。

【讨论】：