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

5

我在Angular文档这里学到的方法是在容器引用上调用createComponent()。

与示例中使用输入不同,我正在导入一个组件并尝试直接传递它,因为文档中也提到

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

但是为什么我的编译器会抱怨呢? 根据我的理解,以下是推荐的解决方案。

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

但我得到的是

类型“typeof RecentGridComponent”的参数不能分配给类型“ComponentFactory”。 类型“typeof RecentGridComponent”缺少类型“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)
  }

}

4
你正在阅读的文档适用于v13.0.0版本,将你的Angular升级到13版本,应该可以解决你的问题。或者阅读12版本的文档https://v12.angular.io/api/core/ViewContainerRef#createcomponent - yurzui
1
你也可以关注这个链接:https://github.com/danmt/dynamic-component-loader - Andrea Colleoni
1个回答

4

正如yurzui指出的那样,v12的正确规范在这里

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接