在Angular中,可以使用@ViewChild
装饰器来读取动态加载组件。
首先,确保你已经导入了ViewChild
装饰器和ComponentFactoryResolver
。
接下来,在父组件中,创建一个视图容器引用,用于加载动态组件。在模板中,使用ng-template
标签作为容器。
然后,在父组件的类中,使用@ViewChild
装饰器来引用视图容器。
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
接下来,使用ComponentFactoryResolver
来加载动态组件。在父组件的构造函数中注入ComponentFactoryResolver
。
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
然后,创建一个方法来动态加载组件。
loadComponent() {
// 清空容器
this.container.clear();
// 加载动态组件
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
const componentRef = this.container.createComponent(componentFactory);
// 可以通过componentRef.instance访问动态组件的公共方法和属性
componentRef.instance.someMethod();
}
在上述代码中,DynamicComponent
是你要动态加载的组件类。你可以通过componentRef.instance
访问动态组件的公共方法和属性。
最后,在父组件的模板中,使用一个按钮或其他触发器来调用loadComponent
方法。
这样,当你点击按钮时,动态组件将被加载到视图容器中,并且你可以使用@ViewChild
装饰器来读取动态组件的属性和方法。