В чем разница между createEmbeddedView и createComponent в угловой

я путаюсь между вариантами использования createEmbeddedView и createComponent, i.e когда использовать какой. Пожалуйста, придумайте несколько случаев, которые могут рассказать о подходящей настройке для использования любого из них в "сценарии динамического создания"

7
angular typescript

1 ответов

посмотреть этот семинар по манипуляции DOM или читать работа с DOM в Angular: неожиданные последствия и методы оптимизации где я объясняю разницу с примерами.

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

class ViewContainerRef {
    ...
    createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>
    createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>
}

чтобы узнать больше о манипулировании DOM, прочитайте изучение угловых методов манипуляции DOM с помощью ViewContainerRef.

createEmbeddedView

он используется для создания представления с помощью TemplateRef. TemplateRef создается компилятором Angular, когда он встречает ng-template тег в вашем компоненте html. Представление, созданное с помощью этого метода, называется embedded view.

import { VERSION, Component, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <ng-container #vc></ng-container>
      <ng-template #tpl>
          <h1>Hello, {{name}}</h1>
      </ng-template>
  `,
  styles: ['']
})
export class AppComponent {
  name = `Angular! v${VERSION.full}`;

  @ViewChild('tpl', {read: TemplateRef}) tpl: TemplateRef<any>;
  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

  ngOnInit() {
    this.vc.createEmbeddedView(this.tpl);
  }
}

Stackblitz демо

этот подход используется всеми структурными директивами, такими как *ngIf и *ngFor потому что они все обернуть ng-template. Например, для *ngFor код:

<div *ngIf="data">{{name}}</div>

превращается в

<ng-template ngIf="data">
   <div>{{name}}</div>

и

16