使用选择器字符串格式列表绑定 Angular 2 组件

Question

我在 Angular 2 中定义了一个列表小部件组件选择器。当我在 HTML 文件中键入 <app-xxx-widget></app-xxx-widget> 时仍然可以。问题是我有一个字符串格式的组件选择器数组，当我绑定{{ widgetTag }}（使用*ngFor="let widgetTag of widgetTagList"）时，浏览器只会将widgetTag 理解为文本，而不是Angular 组件。我该如何解决这个问题？
我认为在这种情况下是不可能的

Answer 1

您可以动态创建它们，这有点棘手但完全可行。

一些例子：

http://blog.rangle.io/dynamically-creating-components-with-angular-2/

https://medium.com/@tudorgergely/injecting-components-dynamically-in-angular-2-3d36594d49a0

https://angular.io/guide/dynamic-component-loader

加载 1 个组件的基本示例：

• 注入Injector和NgModuleFactoryLoader
• 在模板中添加一个容器元素（例如<div #componentReference></div>）
• 添加一个组件引用元素以保存对已创建组件的引用

• 从它的工厂创建一个组件

  public component: any;
  @ViewChild('componentReference') componentReference: any;
  
  public createComponent(module: string, component: string) {
  
  this.loader.load(module).then(
  
    (f: NgModuleFactory<any>) => {
  
      const moduleRef = f.create(this.injector);   
  
      (<any>moduleRef.componentFactoryResolver)._factories.forEach(
        (cF) => {
          if (cF.componentType.name === component) {
  
            const fac = moduleRef.componentFactoryResolver.resolveComponentFactory(cF.componentType);
            this.componentReference = this.component.createComponent(fac);
          }
        }
      );
    });
  

  }

这个例子是用组件.name 制作的，但可以很容易地更改为使用选择器，但是你必须自己弄清楚。 确保所需的组件位于您的模块中 entryComponents。