Question

我正在阅读Angular基础知识中的文档，试图了解FactoryComponentResolvers和ViewContainerRefs的工作方式。。。下面的代码段来自Angular文档。 https://angular.io/guide/dynamic-component-loader。

代码在ads数组中循环，并不断将新的adItems加载到子模板中。

我的问题是，为什么此过程不会导致加载同一组件的多个实例的多个（最终难以管理）数量？除了loadComponent()方法之外，是否应该有某种unloading或destroying进程来防止积累太多实例？还是destroying以某种方式在幕后发生？还是viewContainerRef.createComponent(componentFactory)足够聪明，知道如果已经创建了一个组件，它将仅返回对该现有组件的引用，而不是创建一个新组件？预先非常感谢，如果有人可以澄清一下！

export class AdBannerComponent implements OnInit, OnDestroy {
  @Input() ads: AdItem[];
  currentAdIndex = -1;
  @ViewChild(AdDirective) adHost: AdDirective;
  interval: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
    this.getAds();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAdIndex];

    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;
  }

  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}

Answer 1

让viewContainerRef = this.adHost.viewContainerRef; viewContainerRef.clear（）

在代码的这一部分，loadComponent函数检索对adHost viewContainerRef对象的引用，并摆脱现有内容。因此，要回答您的问题，为什么viewContainerRef.createComponent不能用组件对象充斥页面，是因为clear函数在创建任何新组件之前首先破坏了现有组件。

为什么viewContainerRef没有填充组件的多个实例？

1 个答案: