createEmbeddedView和createComponent有什么区别? [英] What is the difference between createEmbeddedView and createComponent?

问题描述

在createEmbeddedView和createComponent的用例之间(即何时使用哪个用例)，我感到困惑.

I am confused between use cases of createEmbeddedView and createComponent, i.e when to use which one.

请提出一些案例，这些案例可以说明在动态创建方案"中使用它们的合适设置.

Please come up with some cases that can tell about suitable setting to use either of them in "dynamic creation scenario".

推荐答案

请参见此DOM操作研讨会或阅读

See this workshop on DOM manipulation or read Working with DOM in Angular: unexpected consequences and optimization techniques where I explain the difference with examples.

这两种方法都用于将内容动态添加到组件视图(DOM).此内容可以是基于模板的，也可以是基于组件的.在Angular中，我们通常使用 ViewContainerRef 来操作DOM.这两种方法都可以使用:

These both methods are used to dynamically add content to the component view (DOM). This content can be either a template or a component based. In Angular we usually manipulate the DOM using ViewContainerRef. And both these methods are available on it:

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的更多信息，请阅读使用ViewContainerRef探索Angular DOM操作技术.

To learn more about manipulating the DOM read Exploring Angular DOM manipulation techniques using ViewContainerRef.

它用于使用 TemplateRef 创建视图.当在组件html中遇到ng-template标记时，Angular编译器将创建TemplateRef. 使用此方法创建的视图称为embedded view.

It's used to create a view using TemplateRef. TemplateRef is created by Angular compiler when it encounters ng-template tag in your component html. The view created using this method is called an 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.例如，对于*ngIf代码:

This approach is used by all structural directives like *ngIf and *ngFor because they are all wrap a ng-template. For example, for *ngIf the code:

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

被转化为

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

ngIf指令在内部使用createEmbeddedView:

@Directive({selector: '[ngIf]'})
export class NgIf {
    private _updateView() {
       ...
       if (this._thenTemplateRef) {
           this._thenViewRef =
               this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);

createComponent

它用于使用 ComponentFactory 创建视图.当您在模块的bootstrap属性中指定组件时，它是由Angular编译器创建的，因此编译器会为其生成工厂.使用此方法创建的视图称为hostview.

createComponent

It's used to create a view using ComponentFactory. It's created by Angular compiler when you specify a component in the bootstrap property of the module and so the compiler generates a factory for it. The view created using this method is called a hostview.

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

@Component({
  selector: 'hello',
  template: `<h1>Hello Component!</h1>`,
  styles: [``]
})
export class HelloComponent  {}

@Component({
  selector: 'my-app',
  template: `
      <ng-container #vc></ng-container>
  `,
  styles: ['']
})
export class AppComponent {

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

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(HelloComponent);
    this.vc.createComponent(factory);
  }
}

Stackblitz演示.

要了解有关主机视图和嵌入式视图之间的区别的更多信息，请阅读视图，主机视图和嵌入视图之间的区别是什么?嵌入式视图

To learn more about the difference between a host view and an embedded view read What is the difference between a view, a host view and an embedded view

这篇关于createEmbeddedView和createComponent有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！