Angular原生动态加载器与Portal

一、动态加载组件

方式一

ComponentFactoryResolver

ComponentFactoryResolver是一个简单的注册表，这个注册表将组件映射到生成的 ComponentFactory 类。

作用：组件的模板不会永远是固定的。应用可能会需要在运行期间去加载一些新的组件。所以我们可以使用 ComponentFactoryResolver 来动态添加组件。

abstract class ComponentFactoryResolver {
   
  static NULL: ComponentFactoryResolver
​
  // 检索能创建给定类型的组件的工厂对象(实例化给定类型的组件的工厂)，并返回该工厂对象ComponentFactory。
  abstract resolveComponentFactory<T>(component: Type<T>): ComponentFactory<T>
}

注意：从 v13 开始，建议使用 ViewContainerRef.createComponent() 创建动态组件。
ViewContainerRef.createComponent() 的第一个参数以前是支持传组件工厂，这个版本之后将弃用。从v13开始，第一个参数支持我们直接传组件类。
(具体看后面ViewContainerRef.createComponent 的使用）

ComponentFactory

ComponentFactory类 可用来动态创建组件的工厂的基类。使用生成的 ComponentFactory.create() 方法创建该类型的一个新组件，返回值是一个组件 ComponentRef。

abstract class ComponentFactory<C> {
   
  abstract selector: string     // 组件的 HTML 选择器
  abstract componentType: Type<any>   // 工厂将创建的组件的类型
  abstract ngContentSelectors: string[]   // 组件中所有 元素的选择器
  abstract inputs: {
   ...}  // 组件的 inputs
  abstract outputs: {
   ...}  // 组件的 outputs
  abstract create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: any, ngModule?: NgModuleRef<any>): ComponentRef<C>   // 创建该工厂对应组件类型的一个新组件
}

ComponentRef

表示由 ComponentFactory 创建的组件。提供对组件实例和相关对象的访问，并提供销毁实例的方法。

abstract class ComponentRef<C> {
   
  abstract location: E