Блог

Я просматриваю документацию в Angular Fundamentals, пытаясь понять, как 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);
  }
}

  

пусть ViewContainerRef = this .adHost.ViewContainerRef; ViewContainerRef.clear()

В этой части кода loadComponent функция извлекает ссылку на объект adHost ViewContainerRef и избавляется от существующего содержимого. Итак, отвечаю на ваш вопрос о том, почему viewContainerRef.createComponent страница не заполняется объектами компонентов, потому что clear функция сначала удаляет существующий компонент, прежде чем создавать что-либо новое.