如何使用服务和BehaviorSubject管理Angular中的state？

Question

我还不知道 NgRx，我需要在 Angular 应用程序中管理 state，该应用程序非常简单，我们有项目列表，当用户转到项目列表时，我会下载该数据并显示它，但是当用户导航到管理员时页面，然后返回到项目列表组件 我不想再次下载项目列表。 我可以使用服务和 BehaviorSubject 在 Angular 中管理 state 吗？ 在简单的 Angular 应用程序中管理 state 的最简单方法是什么（如果可以不使用 NgRx）？

Answer 1

你想使用 BehaviorSubject 来存储数据还是像 NgRx 存储一样使用全局 state？ 这是两个不同的东西。 尽管如此，根据您的问题，我假设您想为此使用服务。

您可以为此创建一个简单的服务：

@Injectable()
export class ItemService {
  items$ = this.loadItems().pipe(shareReplay());
}

这将导致loadItems() （将返回 HTTP 可观察对象的 function）仅在第一次订阅此可观察对象时被调用。 之后，新订阅者将从中收到最新的价值。

之后，您可以将此服务注入其他组件并使用async pipe 订阅items$ observable。

Answer 2

对于不可变的 state，您可以像这样使用它：

    private readonly _someStateObj: BehaviorSubject<any> = new BehaviorSubject<any>('initial default value');
    public someStateObj: Observable<any> = this._someStateObj.asObservable();

要获取当前值，请使用：

get currentValueOfStateObj(): any {
    return this._someStateObj.value;
}

使用它在商店（服务）文件中发出新值：

this._someStateObj.next(area);

在组件中，您可以注入服务并订阅 someStateObj 或使用 getter 获取它的当前值。 如果您不需要保留 state 而只需要发出值，请改用 Subject。