我在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)
}
}