Angular 设计问题 - 动态加载 Angular 组件并独立管理状态

Question

我们有一个用于业务事务的 Angular 应用程序（一个 NgModule）以及我们自己的状态管理，它使用 Behavior Subject 服务来帮助在状态变化时通知该应用程序的所有组件。

下一个要求是允许用户添加多个这样的事务，这意味着我们需要动态加载该组件（这应该是直截了当的），最重要的是，每个事务的状态不应相互影响，因为它们都是独立的。 Angular 中的服务是单例的，当一个组件（即一个事务）发生变化时，会通知其他事务组件。这种类型的功能是否有任何模式需要多次独立加载相同的组件而不会相互影响。

Answer 1

首先，您可以延迟加载正在使用的模块，因此该路由上的任何组件及其子组件都将在您的单例模式中与服务一起运行并保持状态管理。一个角度架构技术是使用一个“包装器组件”，它使用你所有的模块组件。这将为您提供满足动态和事务性需求所需的模块化架构。

这是一个包装器组件的示例：

HTML：

<main [@childRouteFadeAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
  </main>

TS：

if (window.history.state) {
      if (window.history.state.app == null) {
        const enrollId = new URLSearchParams(window.location.search).get('someParam');
        console.log('check router state');
        this.apiClient.reloadEnrollment(someId).subscribe((resp) => {
          console.log(resp);
          this.formService.enrollmentForm.patchValue(resp);
          this.loading = false;
        });
      }
    }