在Angular 7中,可以使用ComponentFactoryResolver
来动态加载@Component
。下面是一个示例:
首先,创建一个动态加载组件的服务:
import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
@Injectable()
export class DynamicComponentService {
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
loadComponent(component: any, container: ViewContainerRef) {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
container.clear();
container.createComponent(componentFactory);
}
}
然后,在需要动态加载组件的组件中,注入DynamicComponentService
并使用它来加载组件:
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponentService } from './dynamic-component.service';
import { MyDynamicComponent } from './my-dynamic.component';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private dynamicComponentService: DynamicComponentService) {}
loadComponent() {
this.dynamicComponentService.loadComponent(MyDynamicComponent, this.container);
}
}
最后,创建一个需要动态加载的组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-dynamic-component',
template: `
Dynamic Component
This component is dynamically loaded.
`
})
export class MyDynamicComponent {}
通过点击"Load Component"按钮,就可以动态加载MyDynamicComponent
组件到MyComponent
组件中的中了。
希望这个示例能够帮助你解决问题!