关于angular:angular动态组件的使用demo

什么是动静组件？

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

实现动静组件

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

创立动静组件：须要创立要动静加载的组件。这些组件与一般组件一样，但通常会用于展现特定的内容或性能。

创立容器组件：接下来，你须要创立一个容器组件，用于动静加载其余组件。这个容器组件应该蕴含一个指令或组件，用来标记动静加载组件的地位。

通过组件工厂加载组件：应用 Angular 提供的ComponentFactoryResolver 和 ViewContainerRef，你能够在容器组件中动静加载组件。首先，解析要加载的组件的工厂，而后应用工厂创立组件并将其增加到视图容器中。

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);

应用示例

创立两个不同的动态组件：

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