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

Question

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

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中。