在Angular中,可以通过使用Angular的ComponentFactoryResolver
和ViewContainerRef
来动态加载组件。下面是一个简单的示例:
DynamicComponent
:import { Component } from '@angular/core';
@Component({
template: 'Dynamic Component
',
})
export class DynamicComponent {}
AppComponent
中,使用ComponentFactoryResolver
和ViewContainerRef
来动态加载组件:import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@Component({
selector: 'app-root',
template: ' ',
})
export class AppComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
loadComponent() {
// 清空容器中的内容
this.container.clear();
// 解析动态组件的工厂
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
// 创建动态组件并将其添加到容器中
const componentRef = this.container.createComponent(componentFactory);
}
}
在上面的示例中,当点击按钮时,会调用loadComponent
方法。该方法首先通过resolveComponentFactory
方法来解析动态组件的工厂,然后使用createComponent
方法创建动态组件,并将其添加到ViewContainerRef
中。
注意:需要在模块中将DynamicComponent
添加到entryComponents
数组中,以便Angular能够正确编译和加载该组件:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DynamicComponent } from './dynamic.component';
@NgModule({
declarations: [AppComponent, DynamicComponent],
imports: [BrowserModule],
entryComponents: [DynamicComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
以上就是一个简单的示例,展示了如何从外部模块加载组件。