如何在 Angular 12 中動態加載組件

Question

我在 angular 文檔中學到的路徑是在容器引用上調用 createComponent() 。

我沒有使用示例中的輸入，而是導入一個組件並嘗試直接傳遞它，因為在文檔中它也說：

Angular 不再需要組件工廠來動態創建組件。 使用 createComponent 方法的不同簽名，它允許直接傳遞 Component 類。

但是為什么我的編譯器會抱怨。 根據我對規范的低估，以下是推薦的解決方案。

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

但我得到

“typeof 最近網格組件”類型的參數不可分配給“ComponentFactory”類型的參數。 類型“typeofRecentGridComponent”缺少類型“ComponentFactory”中的以下屬性：選擇器、組件類型、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 的正確規范在這里

要直接傳遞類，應該使用 v13。