ViewContainerRef vs ngFor

Question

Что лучше? Использовать ngFor или ViewContainerRef для динамического создания компонентов? В чем разница?

Например, если у меня есть кнопка для создания нового элемента, который при каждом нажатии создает новый компонент.

1) Первым вариантом будет следующий

items: number[] = [];

addItem() {
  this.items.push(1);
}

<my-component *ngFor="let item of items"></my-component>

2) Второй параметр

@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

  index: number = 0;

  componentsReferences = [];

  constructor(private CFR: ComponentFactoryResolver) {
  }

  createComponent() {

    let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
    let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
    let currentComponent = componentRef.instance;

    currentComponent.selfRef = currentComponent;
    currentComponent.index = ++this.index;

    // prividing parent Component reference to get access to parent class methods
    currentComponent.compInteraction = this;

    // add reference for newly created component
    this.componentsReferences.push(componentRef);
  }

  remove(index: number) {

    if (this.VCR.length < 1)
      return;

    let componentRef = this.componentsReferences.filter(x => x.instance.index == index)[0];
    let component: ChildComponent = <ChildComponent>componentRef.instance;

    let vcrIndex: number = this.VCR.indexOf(componentRef)

    // removing component from container
    this.VCR.remove(vcrIndex);

    this.componentsReferences = this.componentsReferences.filter(x => x.instance.index !== index);
  }

Первый вариант - это типичный способ итерации массива и отображения его содержимого через компонент с помощью ngFor. Второй вариант использует ViewContainerRef вместо ngFor. Пример можно увидеть по следующим ссылкам.

https://stackblitz.com/edit/add-or-remove-dynamic-component?file=src%2Fapp%2Fparent%2Fparent.component.ts

https://stackblitz.com/edit/angular-jukjib

Answer 1

Исходя из моего понимания:

Если вы хотите вставить новый компонент или шаблон, вам нужно указать Angular, куда поместить этот элемент. И это то, что является ViewContainerRef. Это DOM-элемент (контейнер), в который вы можете поместить свой новый компонент как элемент этого элемента.

* ngFor Директива в Angular. NgFor - это встроенная директива шаблона, которая позволяет легко перебирать что-то вроде массива или объекта и создавать шаблон для каждого элемента. ... of users означает, что мы будем выполнять итерацию по итерируемым пользователям, которые должны быть доступны в нашем компоненте

В итоге, если вы хотите вставить новый компонент или шаблон в качестве родственного элемента, вы go для ViewContainerRef , если вам нужно только одно, чтобы перебрать что-то вроде массива или объекта и создать шаблон в том же компоненте, используйте ngFor

Надеюсь, это поможет. Исправления приветствуются