Angular 12 延迟加载组件动态代码什么都不做

Question

我正在尝试使用 angular 12 动态延迟加载一个组件，但我没有收到任何错误，而且该组件也没有出现。

代码如下：

app.component.ts

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

...

constructor(private vcRef: ViewContainerRef, private cResolver: ComponentFactoryResolver) { }

和方法：

async load() {
    this.vcRef.clear();
    const { MyModalComponent } = await import('../my-modal.component');
    this.vcRef.createComponent(this.cResolver.resolveComponentFactory(MyModalComponent));
  }

app.component.html

<button (click)="load()">Load it</button>

MyModalComponent中的html就是

<p>Component Here</p>

我错过了什么或者我做错了什么？

Answer 1

您正在动态创建组件，仅此而已。您还需要将组件添加到 Angular 组件树和 DOM:

async load {
    const { MyModalComponent } = await import('../my-modal.component');
    // 1. Create a component reference
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory<MyModalComponent>(component)
      .create(this.injector);

    // 2. Attach component to the appRef so that it's inside the ng component tree
    this.appRef.attachView(componentRef.hostView);

    // 3. Get DOM element from the component
    const domElement = (componentRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    // 4. Append DOM element to the body
    document.body.appendChild(domElement);
}

Answer 2

因为 Angular 12 componentFactoryResolver 不再需要。

如果您的 HTML 模板中有 ng-template 目标：

<ng-template #myTemplate></ng-template>

这是您在@Component 中需要的内容：

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

async #loadComponent() {
    const { MyComponent } = await import('path/to/your/component');
    if (this.myTemplate) {
      this.myTemplate.clear();
      this.myTemplate.createComponent(MyComponent);
    }
  }

Angular 12 延迟加载组件动态代码什么都不做

Angular 12 Lazy Load Component Dynamically code doing nothing

angular

angular12