Angular Elements同一页面多实例被覆盖问题排查

你遇到的核心问题是误用了bootstrapApplication的作用：这个方法是用来启动整个Angular应用的，同一页面中Angular只允许存在一个根应用实例。你循环调用它时，后续的启动会覆盖之前的应用实例，导致只有最后一个<app-test>能正常渲染，其他实例被覆盖。

Angular Elements的核心就是把组件包装成标准的Web Component，这样就能像普通HTML标签一样在页面中多次使用，每个实例可以独立接收属性。具体步骤如下：

1. 配置项目支持Angular Elements #

确保你的Angular项目已经安装了@angular/elements：

ng add @angular/elements

2. 修改main.ts，将组件转为自定义元素并注册 #

替换你原来的引导代码，改为注册自定义元素：

import { createCustomElement } from '@angular/elements';
import { bootstrapApplication } from '@angular/platform-browser';
import { TestComponent } from './app/test.component';
import { Injector } from '@angular/core';

bootstrapApplication(TestComponent)
  .then((appRef) => {
    const injector = appRef.injector;
    // 将组件转为自定义元素
    const TestElement = createCustomElement(TestComponent, { injector });
    // 注册到浏览器的自定义元素注册表
    customElements.define('app-test', TestElement);
  })
  .catch(err => console.error(err));

3. 在组件中接收type属性 #

确保你的TestComponent能正确接收并响应type属性：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
    <div>当前Type值：{{ type }}</div>
  `,
  standalone: true // 若为独立组件需添加此配置
})
export class TestComponent {
  @Input() type: string = 'default';
}

4. 页面中正常使用多实例 #

现在你可以在WordPress页面中正常使用多个<app-test>实例，每个实例的type属性会被组件正确读取：

<app-test type='1'></app-test>
<app-test type='2'></app-test>

你之前循环调用bootstrapApplication，每次调用都会创建一个全新的Angular应用根实例，而Angular在同一页面中只能有一个根应用，后续的实例会替换掉之前的，所以只有最后一个组件实例能显示。而通过Angular Elements注册自定义元素后，每个<app-test>都是独立的Web Component实例，由Angular统一管理，不会互相覆盖。

内容的提问来源于stack exchange，提问作者Baris Kayhan