要在Angular CLI中加载多个动态组件到父组件中,可以使用Angular的ComponentFactoryResolver和ViewContainerRef。
首先,在父组件的HTML模板中,添加一个容器元素,用于动态添加子组件:
然后,在父组件的Typescript文件中,导入需要的模块和组件:
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ChildComponent1 } from './child-component1.component';
import { ChildComponent2 } from './child-component2.component';
接下来,在父组件的构造函数中注入ComponentFactoryResolver和ViewContainerRef:
constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}
然后,创建一个方法来动态加载子组件。在这个方法中,使用ComponentFactoryResolver来解析子组件的工厂,并使用resolveComponentFactory()方法获取子组件的工厂。然后,使用ViewContainerRef的createComponent()方法来创建子组件的实例,并将其添加到容器中。
loadComponent(component: any) {
// 清空容器
this.container.clear();
// 解析子组件的工厂
const factory = this.resolver.resolveComponentFactory(component);
// 创建子组件的实例并添加到容器中
const componentRef = this.container.createComponent(factory);
}
最后,在需要的地方调用loadComponent()方法来加载子组件。例如,在父组件的ngOnInit()方法中:
ngOnInit() {
// 加载子组件1
this.loadComponent(ChildComponent1);
// 加载子组件2
this.loadComponent(ChildComponent2);
}
这样,Angular CLI就可以加载多个动态组件到父组件中了。