angular动态组件的使用demo

什么是动态组件？

动态组件是指在运行时根据条件或用户操作动态加载并渲染的组件。这种技术允许应用程序根据需要动态地切换和加载不同的组件。举例来说，当用户在应用程序中进行了特定的操作，比如点击按钮或者选择了某个选项，你可以根据这些操作加载不同的组件，而不必在应用程序初始化时将所有组件都加载进来。也就是说组件的模板不会永远是固定的。应用可能会需要在运行期间加载一些新的组件

Angular中使用动态组件时常用的API

1.ViewContainerRef：
用于管理动态加载的组件的容器。它提供了一种将动态创建的组件插入到特定位置的方法，并提供了对插入组件的访问和控制。

容器管理：ViewContainerRef 可以视作一个容器，用于动态加载和管理组件。

动态组件加载：通过 ViewContainerRef，可以在容器中动态地创建组件实例，并将其添加到容器中。

清空容器：ViewContainerRef 还提供了一个 clear() 方法，用于清空容器中的所有内容，可以在需要时用来移除已加载的组件。

2.ComponentFactoryResolver:
允许在运行时动态加载组件，而不是在编译时将所有组件都包含在模板中。

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

// 解析 MyComponent 的工厂
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
    
// 创建 MyComponent 的实例，并将其添加到视图容器中
const componentRef = this.dynamicComponentContainer.createComponent(componentFactory);

实现动态组件

在 Angular 中实现动态组件通常涉及以下几个步骤：

创建动态组件：需要创建要动态加载的组件。这些组件与普通组件一样，但通常会用于展示特定的内容或功能。

创建容器组件：接下来，创建一个容器组件，用于动态加载其他组件。这个容器组件应该包含一个指令或组件，用来标记动态加载组件的位置。

通过组件工厂加载组件：使用 Angular 提供的ComponentFactoryResolver 和 ViewContainerRef，你可以在容器组件中动态加载组件。首先，解析要加载的组件的工厂，然后使用工厂创建组件并将其添加到视图容器中。

使用示例

创建两个不同的静态组件：

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

@Component({
  selector: 'app-dynamic',
  template: '<p>组件一</p>',
})
export class DynamicComponent {
}

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

@Component({
  selector: 'app-dynamic-two',
  template: '<p>动态加载组件二</p>',
})
export class DynamicTwoComponent {
}

创建容器组件

export class AppComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef })
  dynamicComponentContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent1() {
    this.loadComponent(DynamicComponent);
  }

  loadComponent2() {
    this.loadComponent(DynamicTwoComponent);
  }

  loadComponent(component: any) {
    this.dynamicComponentContainer.clear();
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.dynamicComponentContainer.createComponent(componentFactory);
  }
}

<!--app.component.html-->
<div #dynamicComponentContainer></div>
<button (click)="loadComponent1()">加载组件一</button>
<button (click)="loadComponent2()">加载组件二</button>

动态切换

ngOnInit(): void {
    setInterval(() => {
      this.loadComponent1();
      setTimeout(() => {
        this.loadComponent2();
      }, 1000);
    }, 2000);
  }

总结

动态组件就像是你在玩积木，但这些积木是在你玩的时候才从盒子里拿出来的，而不是一开始就都摆在桌子上。在 Angular 中，动态组件就像是这些积木，你可以根据你的需要，在应用程序运行时动态地加载它们。

参考
https://angular.cn/guide/dynamic-component-loader