有没有办法在Angular中程序化地渲染一个组件？

Question

就像标题所说的那样，有没有办法在Angular中程序化地渲染（变成DOM元素）一个组件？

例如，在React中，我可以使用 ReactDOM.render 来把一个组件变成一个DOM元素。我想知道是否可以在Angular中实现类似的功能？

Answer 1

首先，你需要在你的HTML文件中的动态加载组件的位置有一个模板。

<ng-template #placeholder></ng-template>

在组件中，你可以注入 DynamicFactoryResolver 内的构造函数。一旦你将执行 loadComponent() 职能，该 DynamicComponent 将在模板中可见。DynamicComponent 可以是任何你想显示的组件。

import { Component, VERSION, ComponentFactoryResolver, ViewChild, ElementRef, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  @ViewChild('placeholder', {read: ViewContainerRef})
  private viewRef: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {}

  loadComponent() {
    this.viewRef.clear();
    const componentFactory = this.cfr.resolveComponentFactory(DynamicComponent);
    const componentRef = this.viewRef.createComponent(componentFactory);
  }
}

下面是一个 叠加闪电战.

怎么了？loadComponent 函数的作用是。

1. 它可以清除主机
2. 它为你的组件创建一个所谓的工厂对象。(resolveComponentFactory)
3. 它创建了一个工厂对象的实例，并将其插入到主机引用中 (createComponent)
4. 您可以使用 componentRef 例如，修改公共属性或触发该组件实例的公共功能。