要加载动态组件,可以使用Angular的ComponentFactoryResolver和ViewContainerRef。
首先,需要在组件中注入ComponentFactoryResolver和ViewContainerRef:
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-dynamic-component-loader',
template: `
`
})
export class DynamicComponentLoaderComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
}
loadComponent() {
// 创建动态组件工厂
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
// 清空容器中的内容
this.container.clear();
// 创建动态组件并添加到容器中
const componentRef = this.container.createComponent(componentFactory);
// 可以通过componentRef实例访问动态组件的属性和方法
componentRef.instance.property = 'Value';
componentRef.instance.method();
}
}
在上面的示例中,我们通过ViewChild装饰器获取了一个名为container的ViewContainerRef实例,这将用于在指定的位置动态加载组件。
在loadComponent方法中,我们首先使用ComponentFactoryResolver的resolveComponentFactory方法来获取动态组件的工厂。然后,我们使用ViewContainerRef的createComponent方法创建了动态组件的实例,并将其添加到容器中。
最后,我们可以通过componentRef实例访问动态组件的属性和方法。
为了完整起见,这里还提供了一个动态组件的示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-dynamic-component',
template: 'Dynamic Component: {{ property }}'
})
export class DynamicComponent {
property: string;
method() {
console.log('Dynamic Component method called');
}
}
在上面的示例中,我们定义了一个名为DynamicComponent的组件,它有一个名为property的属性和一个名为method的方法。
当点击"Load Component"按钮时,将动态加载DynamicComponent,并在页面上显示其属性值。