如何根据对象的属性加载动态组件？

Question

我正在尝试构建一个可能包含不同组件的卡片列表；例如，我有以下对象数组：

{
   title: 'Title',
   descrption: 'Description',
   template: 'table',
},
{
  title: 'Title',
  descrption: 'Description',
  template: 'chart',
}

我将此数组作为来自服务的响应，然后我需要将每个对象与基于 template 属性的组件匹配，例如，第一项应匹配 TableComponent 和第二个给ChartComponent；

我正在尝试遵循有关 Dynamic Component Loading 的 Angular 文档，但我不确定如何告诉方法如何将数组中的每个对象与特定组件匹配。

在我的父组件中，我创建了一个锚点，组件应该使用指令加载：

<ng-template appCheckpointHost></ng-template>

我正在尝试使用示例中显示的ComponentFactoryResolver。

loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChartCheckpointComponent);
    const viewContainerRef = this.checkHost.viewContainerRef;
  }

示例展示了“服务”每三秒运行一次，获取一个随机项，并显示出来的场景；但我想要做的是在父组件加载时获取所有项目，并使用其各自的组件呈现每个项目。

有什么想法可以让它发挥作用吗？

Answer 1

你可以像这样创建一个字典：

const nameToComponentMap = {
  table: TableComponent,
  chart: ChartComponent 
};

然后只需使用这个字典来确定应该呈现哪个组件，具体取决于您的 items 数组中特定 item 的 template 属性：

const componentTypeToRender = nameToComponentMap[item.template];
this.componentFactoryResolver.resolveComponentFactory(componentTypeToRender);

Answer 2

您可以查看我的博客here

首先我需要创建一个指令来引用我们视图中的模板实例

import { Directive, ViewContainerRef } from "@angular/core";

@Directive({
    selector: "[dynamic-ref]"
})
export class DynamicDirective {
    constructor(public viewContainerRef: ViewContainerRef) {}
}

然后我们像这样简单地将指令放在视图中

 <ng-template dynamic-ref></ng-template>

我们将指令 dynamic-ref 放到 ng-content 中，这样我们就可以让 Angular 知道组件将在哪里渲染

接下来我将创建一个服务来生成组件并销毁它

import {
    ComponentFactoryResolver,
    Injectable,
    ComponentRef
} from "@angular/core";
@Injectable()
export class ComponentFactoryService {
    private componentRef: ComponentRef<any>;
    constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

    createComponent(
        componentInstance: any,
        viewContainer: any
    ): ComponentRef<any> {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
            componentInstance
        );
        const viewContainerRef = viewContainer.viewContainerRef;
        viewContainerRef.clear();
        this.componentRef = viewContainerRef.createComponent(componentFactory);
        return this.componentRef;
    }

    destroyComponent() {
        if (this.componentRef) {
            this.componentRef.destroy();
        }
    }
}

最后在我们的组件中我们可以这样调用服务

@ViewChild(DynamicDirective) dynamic: DynamicDirective;

constructor(
        private componentFactoryService: ComponentFactoryService
    ) {

    }

ngOnInit(){
       const dynamiCreateComponent = this.componentFactoryService.createComponent(TestComponent, this.dynamic);
       (<TestComponent>dynamiCreateComponent.instance).data = 1;
       (<TestComponent>dynamiCreateComponent.instance).eventOutput.subscribe(x => console.log(x));
}

ngOnDestroy(){
  this.componentFactoryService.destroyComponent();
}

/////////////////////////////////
export class TestComponent {
  @Input() data;
  @Output() eventOutput: EventEmitter<any> = new EventEmitter<any>();

  onBtnClick() {
    this.eventOutput.emit("Button is click");
  }      
}