有没有办法以编程方式在 Angular 中渲染组件？

Question

正如标题所说，有没有一种方法可以以编程方式渲染（到 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);
  }
}

这是一个Stackblitz。

该loadComponent函数的作用是：

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