如何在单页中多次引导同一个Angular独立组件？

感谢Andrew的回答和评论，我将调整方案：

• 从survey-angular切换到survey-angular-ui包
• 遵循示例中详细介绍的每个小部件实现方案
• 创建一个单独的模块，声明所有这些组件并将其注册到序列化器：

import { NgModule } from '@angular/core';
import { ColorPickerModule } from 'ngx-color-picker';
import { ColorPickerComponent } from './color.component';
import { registerColorPicker } from './color.model';

// Register all components here
registerColorPicker();

@NgModule({
  // Declare all Angular components
  declarations: [ColorPickerComponent],
  // Import any library modules you need for your custom widgets
  imports: [ColorPickerModule],
})
export class CustomWidgetsModule {}

• 随后在主应用模块中导入该CustomWidgetsModule

我正研究将Angular独立组件用作基础，编写可作为SurveyJS自定义问题的高级小部件。

我当前的方案是动态生成NgModule，配置相关导入项后将其引导至自定义问题的HTML元素：

afterRender: async (question: Question, el: HTMLDivElement) => {
  @NgModule({
    imports: [BrowserModule, HttpClientModule, ...],
    providers: [...],
  })
  class CustomQuestionModule implements DoBootstrap {
    ngDoBootstrap(appRef: ApplicationRef): void {
      appRef.bootstrap(widgetComponentClass, el);
    }
  }

  await platformBrowserDynamic().bootstrapModule(CustomQuestionModule);
}

Angular 14引入独立组件后，我本以为可以去掉生成的NgModule，改用bootstrapApplication API来引导组件。

这在单个组件场景下可行，但如果有多个相同的独立组件，它们都会挂载到第一个组件的HTML元素上。也就是说，我似乎无法将两个相同的独立组件引导到不同的HTML元素？

在之前的方案（如上述代码示例所示）中，我可以指定模块要引导到的元素。使用独立组件时是否有等效的实现方式？

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