Angular 动态组件指南

Angular 动态组件是构建可复用和模块化应用程序的关键部分。它们允许你根据需要动态地添加和移除组件。

动态组件的基本用法

  1. 首先，你需要在模块中导入 ComponentFactoryResolver 和 ViewContainerRef。
  2. 使用 ComponentFactoryResolver 来获取组件的工厂。
  3. 使用 ViewContainerRef 来挂载组件。
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div #dynamicComponentContainer></div>`
})
export class AppComponent {
  constructor(
    private resolver: ComponentFactoryResolver,
    private container: ViewContainerRef
  ) {}

  loadComponent() {
    const componentFactory = this.resolver.resolveComponentFactory(MyComponent);
    this.container.clear();
    this.container.createComponent(componentFactory);
  }
}

生命周期钩子

动态组件的生命周期钩子与常规组件相同。你可以在组件的 ngOnInit, ngOnChanges, ngDoCheck, ngOnDestroy 等钩子中执行代码。

传递数据给动态组件

你可以通过 @Input() 装饰器将数据传递给动态组件。

@Component({
  selector: 'app-dynamic-component',
  template: `<div>{{ data }}</div>`
})
export class DynamicComponent {
  @Input() data: any;
}

清理组件

当动态组件不再需要时，你应该清理它以避免内存泄漏。

loadComponent() {
  const componentFactory = this.resolver.resolveComponentFactory(MyComponent);
  this.container.clear();
  const componentRef = this.container.createComponent(componentFactory);
  componentRef.instance.data = 'Hello, Dynamic Component!';
}

更多关于 Angular 的信息，请访问我们的 Angular 教程。

[

Angular Logo
]