如何在 Angular 12 中动态加载组件

Question

我在 Angular 文档中了解到 here 的路径是在容器引用上调用 createComponent()。

我没有像示例中那样使用输入，而是导入一个组件并尝试直接传递它，因为also in the docs 它说：

Angular 不再需要组件工厂来动态创建组件。使用 createComponent 方法的不同签名，允许直接传递 Component 类。

但是为什么我的编译器会抱怨。 根据我对规范的理解，以下是推荐的解决方案。

  loadMore() {
    const viewContainerRef = this.resultArea.viewContainerRef;
    const componentRef = viewContainerRef.createComponent<RecentGridComponent>(RecentGridComponent);
  }

但我明白了

“typeof RecentGridComponent”类型的参数不能分配给“ComponentFactory”类型的参数。 “typeof RecentGridComponent”类型缺少“ComponentFactory”类型的以下属性：选择器、componentType、ngContentSelectors、输入和 2 个更多。ts(2345)

相反，我必须实例化一个工厂（完整代码）

import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core';
import { RecentGridComponent } from '../recent-grid/recent-grid.component';
import { ResultAreaDirective } from '../result-area.directive';

@Component({
  selector: 'app-search-filters',
  templateUrl: './search-filters.component.html',
  styleUrls: ['./search-filters.component.sass']
})
export class SearchFiltersComponent implements OnInit {

  @ViewChild(ResultAreaDirective) resultArea!: ResultAreaDirective

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit(): void {
  }

  loadMore() {
    const viewContainerRef = this.resultArea.viewContainerRef;
    const factory = this.resolver.resolveComponentFactory(RecentGridComponent)
    const componentRef = viewContainerRef.createComponent<RecentGridComponent>(factory)
  }

}

Answer 1

正如 yurzui 所指出的，v12 的正确规范是 here

要直接通过类，应该使用 v13。