同一页面放置多个相同Angular自定义元素状态共享如何解决？

你遇到的问题根源是默认情况下Angular的根注入器、全局注册的服务/Store都是单例，且自定义元素注册时复用了同一个注入器实例，可通过以下方案实现完全隔离：

1. 注入器实例隔离 #

不要复用应用根注入器，每个自定义元素实例创建独立的注入器：

• 弃用全局根注入器绑定，在自定义元素的connectedCallback生命周期触发时，动态创建新的注入器实例，所有需要隔离的服务、Store都在当前注入器内注册
• 避免将服务通过providedIn: 'root'声明为全局单例，改为在自定义组件的providers数组中注册，保证每个组件实例对应独立的服务实例

2. NgRx Store 冲突规避 #

• 不要全局导入StoreModule.forRoot()，改为每个独立注入器内单独初始化Store
• 所有reducer注册使用forFeature，并为每个自定义元素实例生成唯一的feature key（可以加随机字符串前缀），避免不同元素的reducer key冲突
• 关闭Store的全局作用域共享，禁止跨注入器访问Store实例

3. 打包层面全局作用域隔离 #

• 打包时配置输出格式为IIFE（立即执行函数），确保自定义元素的所有代码都运行在独立闭包内，不会污染全局作用域
• 若需要兼容不同Angular版本的自定义元素共存，可将Angular运行时、依赖包全部打包进当前元素的bundle中，避免全局共享的Angular runtime版本冲突
• 注册自定义元素前先通过customElements.get()检查标签是否已注册，避免重复注册报错

4. 代码示例 #

错误的常规写法（会导致共享单例） #

@NgModule({
  declarations: [MyCustomElComponent],
  imports: [BrowserModule, StoreModule.forRoot(rootReducer)],
  providers: [StoreService] // 根模块注册的服务为全局单例
})
export class AppModule {
  constructor(private injector: Injector) {
    // 复用根注入器，所有元素实例共享该注入器的服务
    const el = createCustomElement(MyCustomElComponent, { injector: this.injector });
    customElements.define('my-custom-el', el);
  }
  ngDoBootstrap() {}
}

隔离的正确写法 #

// 服务改为组件级注册
@Component({
  selector: 'my-custom-el',
  template: `<div>{{count}}</div>`,
  providers: [StoreService] // 每个组件实例对应独立的服务实例
})
class MyCustomElComponent {
  count = 0;
  constructor(private storeService: StoreService) {}
}

// 动态创建独立注入器，每个元素实例完全隔离
if (!customElements.get('my-custom-el')) {
  customElements.define('my-custom-el', class extends HTMLElement {
    private componentRef: ComponentRef<MyCustomElComponent>;
    private injector: Injector;

    constructor() {
      super();
      // 每次构造元素实例生成全新注入器
      this.injector = Injector.create({
        providers: [
          // 单独初始化当前元素的Store，避免全局冲突
          {
            provide: Store,
            useFactory: () => createStore(
              // 加随机前缀生成唯一reducer key
              { [`my-el-${Math.random().toString(36).slice(2)}`]: elReducer }
            )
          }
        ],
        parent: platformBrowserDynamic().injector
      });
    }

    connectedCallback() {
      const cf = this.injector.get(ComponentFactoryResolver).resolveComponentFactory(MyCustomElComponent);
      this.componentRef = cf.create(this.injector);
      this.appendChild(this.componentRef.location.nativeElement);
      this.componentRef.changeDetectorRef.detectChanges();
    }

    disconnectedCallback() {
      this.componentRef?.destroy();
    }
  });
}

内容的提问来源于stack exchange，提问作者Mauro Cioni