Angular提供了一种可以在运行时动态加载组件的方法。使用Angular的动态组件可以实现这一点。

示例代码如下：

// 定义动态组件并将其添加到Angular模块中

import { NgModule, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

import { CommonModule } from '@angular/common';

import { DynamicComponent } from './dynamic.component';

@NgModule({

imports: [CommonModule],

declarations: [DynamicComponent],

entryComponents: [DynamicComponent],

exports: [DynamicComponent]

})

export class DynamicModule {

constructor(private resolver: ComponentFactoryResolver) { }

resolveComponent() {

const factory = this.resolver.resolveComponentFactory(DynamicComponent);

this.container.createComponent(factory);

}

@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

}

// 在父组件中使用动态组件

import { Component, OnInit } from '@angular/core';

import { DynamicModule } from './dynamic.module';

@Component({

selector: 'app-parent',

template: `

Load Component`

})

export class ParentComponent implements OnInit {

constructor(private module: DynamicModule) { }

ngOnInit() {

}

loadComponent() {

this.module.resolveComponent();

}

}