Question

我一直在探索Angular Dynamic组件加载器，但仍然无法实现，我何时需要使用它。

当前情景： 我将小部件的数据作为对象数组获取。在每个数组元素的基础上，我试图创建一个组件。

<div *ngFor="let widget of widgets">
  <span *ngIf="widget.name=='circle'">
    <circle-widget [model]="widget"></circle-widget>
  </span>
  <span *ngIf="widget.name=='numeric'">
    <numeric-widget [model]="widget"></numeric-widget>
  </span>
</div>

我可以使用动态组件加载器实现同样的目标。

<div *ngFor="let widget of widgets">
  <dynamic-comp-loader [model]="widget"></dynamic-comp-loader> 
</div>

DynamicCompLoader.ts

@Component({
  selector: 'dynamic-comp-loader',
  templateUrl: './dynamic-comp-loader.component.html',
  styleUrls: ['./dynamic-comp-loader.component.scss'],
})

ngOnInit(){
  const componentClass = this.getComponentClass(this.model.compName);
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass.component);
  const viewContainerRef = this.appDynamicCompLoader.viewContainerRef;
  viewContainerRef.clear();
  if (this.componentRef) {
    this.componentRef.destroy();
  }
  this.componentRef = viewContainerRef.createComponent(componentFactory);
}

两种情况都正常工作并呈现相应的组件，但我需要了解： -

我们什么时候应该使用动态组件加载器？
使用其中任何一个都有任何性能问题吗？
哪种是基于迭代元素从数组中渲染组件的最佳方法？

何时使用Angular Dynamic Component Loader？

0 个答案: