如何通过向resolveComponentFactory添加动态名称来动态创建Angular组件

Question

我正在尝试动态调用组件。我有一个将子组件类型作为输入（字符串）的组件。例如 detail.itemType = '手风琴'。我希望这个组件根据类型调用正确的子组件，但不使用 if 语句

import { ContentDetail, ContentFields } from 'app/models/content/content.model';
import { Component, OnInit, Input, ComponentFactoryResolver, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
import { AccordionComponent } from './accordion-paragraph/accordion-paragraph.component';

@Component({
  selector: 'app-content-components',
  templateUrl: './content-components.component.html',
  styleUrls: ['./content-components.component.scss']
})
export class ContentComponentsComponent implements OnInit {

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  @ViewChild('createComponent', {static: true, read: ViewContainerRef }) entry: ViewContainerRef;
  @Input() public detail: ContentDetail = new ContentDetail();


  ngOnInit() {
      let component: any = null;
      if(this.detail.itemType === 'Accordion'){
        component = AccordionComponent;
        let factory = this.componentFactoryResolver.resolveComponentFactory(component);
        let componentRef:ComponentRef<any> = this.entry.createComponent(factory);
      }
  }



}

所以我想动态添加 Accordion 而不是使用 if 语句。类似：

   let componentName = Accordion
   component = componentName + Component;
   let factory = this.componentFactoryResolver.resolveComponentFactory(component);
   let componentRef:ComponentRef<any> = this.entry.createComponent(factory);

是否可以添加这样的组件名称？

Answer 1

根据this.detail.itemType创建一个返回组件名的服务，然后使用这个代码：

    let component = this.contentService.getComponentbytype(this.detail.itemType)
    if(component){
      let factory = this.componentFactoryResolver.resolveComponentFactory(component);
      let componentRef:ComponentRef<any> = this.entry.createComponent(factory);
      componentRef.instance.fields = this.fields;
    }

在您的服务文件中：

public getComponentbytype(_itemType: string): any {
let component: any;

if (_itemType) {
    switch (_itemType) {
        case 'specificItemType':{
            component = specificItemTypeComponent;
            break;
        }
        default: {
            component = null;
            break;
        }
    }
}

return component
}

Answer 2

您不能像这样更改组件名称，因为 Component 是对象而不是字符串。您可以创建 ComponentArray 它将旧您的所有组件，并根据 contidion 您可以从数组中传递该组件，像这样

myComponents = [comp1, copm2,...]
if(item==='condition')
   let component =  myComponents[0]