不使用库的 Angular 状态管理

Question

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

我的问题很小，目前无法使用整个库； 我有什么方法可以做到这一点？

Answer 1

超级简单的状态实用程序可以像下面这样。

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

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

Answer 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();
    }
}

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

Answer 3

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

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

或使用

this.store.state;