先看效果

项目地址
用Angular做一个简单的全局Message组件 - 图1

  1. import { DOCUMENT } from "@angular/common";
  2. import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Inject, Injectable, Injector } from "@angular/core";
  3. import { ComponentPortal } from "./ComponentPortal";
  4. import { messageCointerComponent } from "./message-container.component";
  6. let globalCounter = 0;
  8. @Injectable({
  9.     providedIn: 'root',
  10. })
  11. export class messageService {
  13.     /** 组件前缀 */
  14.     protected componentPrefix = 'message-';
  15.     /** Document */
  16.     protected _document: Document;
  17.     /** 根（host）dom元素 */
  18.     private out: any;
  19.     /** 已经添加加上的元素 */
  20.     public _attachedPortal: any;
  21.     /** A function that will permanently dispose this host. */
  22.     /** 一个将永久地处置这个host的函数。*/
  23.     private _disposeFn!: (() => void) | null;
  24.     /** 缓存 */
  25.     public mapCache = new Map();
  27.     constructor(
  28.         public app: ApplicationRef,
  29.         @Inject(DOCUMENT) public document: Document,
  30.         public _componentFactoryResolver: ComponentFactoryResolver,
  31.         public injector: Injector
  32.     ) {
  33.         this._document = document;
  34.     }
  36.     /** 获取ID */
  37.     protected getInstanceId(): string {
  38.         return `${this.componentPrefix}-${globalCounter++}`;
  39.     }
  41.     /** 固定组件实例 */
  42.     public shoeMessage(options: any) {
  43.         // 固定组件
  45.         // 动态创建组件
  46.         let containerInstance: messageCointerComponent = this.withContainer<messageCointerComponent>(messageCointerComponent);
  47.         // 订阅组件销毁
  48.         containerInstance.destory$.subscribe(() => {
  49.             this.destory()
  50.         })
  51.         // 创建message 内容
  52.         containerInstance.create({
  53.             ...options,
  54.             id: this.getInstanceId()
  55.         })
  56.         // 触发更新
  57.         containerInstance.readyInstances();
  58.         return containerInstance;
  59.     }
  61.     /** 动态创建component */
  62.     public show(component: any/* 组件类 */, options: any/** 参数 */) {
  63.         let containerInstance = this.withContainer(component);
  64.         // containerInstance.name = '哈哈';
  65.         containerInstance.readyInstances();
  66.         // 创建message 内容
  67.         containerInstance.create({
  68.             ...options,
  69.             id: this.getInstanceId()
  70.         })
  71.         // 返回
  72.         return containerInstance;
  73.     }
  75.     /** 创建根（host）dom元素且添加到body最后（appendChild） */
  76.     private _createHostElement(): HTMLElement {
  77.         // 创建div元素作为host
  78.         const host = this._document.createElement('div');
  79.         // 添加类
  80.         host.classList.add('container')
  81.         // 获取容器，并将host元素添加进容器元素
  82.         this._document.body.appendChild(host);
  83.         // 返回host元素
  84.         return host;
  85.     }
  87.     /** 创建根（host）dom元素和赋值给out */
  88.     public create() {
  89.         // 创建
  90.         let out = this._createHostElement();
  91.         // 赋值
  92.         this.out = out;
  93.         // 返回
  94.         return out;
  95.     }
  97.     /** Gets the root HTMLElement for an instantiated component. */
  98.     /** 获取实例化组件的根 HTML 元素。*/
  99.     private _getComponentRootNode(componentRef: any): HTMLElement {
  100.         return componentRef.hostView.rootNodes[0] as HTMLElement;
  101.     }
  103.     /** 动态创建组件实例 */
  104.     public withContainer<T>(ctor: typeof messageCointerComponent) {
  105.         // 查看缓存中是否存在当前创建的组件实例
  106.         let cache = this.mapCache.get(this.componentPrefix);
  107.         if (cache /* 如果有 */) {
  108.             return cache; // 直接返回
  109.         }
  110.         if (!this.out/* 如果没有 */) {
  111.             this.create() // 在此函数中调用其他函数，创建和append到body
  112.             this.out.style.zIndex = '1010' // 设置层叠样式
  113.         }
  114.         const componentPortal = new ComponentPortal(ctor, null, this.injector); // 这个类，纯粹就是为了保存一些参数，没有实际意义
  115.         const componentRef = this.attachComponentPortal<T>(componentPortal); // 将给定的ComponentPortal附加到DOM元素
  116.         this.mapCache.set(this.componentPrefix, componentRef.instance) // 加入缓存
  117.         return componentRef.instance; // 返回
  118.     }
  120.     /**
  121.      * Attaches content, given via a Portal, to the overlay.
  122.      * If the overlay is configured to have a backdrop, it will be created.
  123.      *
  124.      * @param portal Portal instance to which to attach the overlay.
  125.      * @returns The portal attachment result.
  126.      */
  127.     /**
  128.      * 将通过Portal给定的内容附加到覆盖物上。
  129.      * 如果覆盖层被配置为有一个背景，它将被创建。
  130.      *
  131.      *param portal 要附加到覆盖层的Portal实例。
  132.      * @returns 门户附件的结果。
  133.      */
  134.     attach<T>(portal: ComponentPortal) {
  135.         return this.attachComponentPortal<T>(portal);
  136.     }
  138.     /**
  139.      * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
  140.      * @param portal Portal to be attached
  141.      * @returns Reference to the created component.
  142.      */
  143.     /**
  144.      *使用ComponentFactoryResolver将给定的ComponentPortal附加到DOM元素。
  145.      * @param portal 要附加的Portal
  146.      * @returns 对创建的组件的引用。
  147.      */
  148.     attachComponentPortal<T>(portal: ComponentPortal) {
  149.         const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
  150.         // 一个简单的注册表，它将 Components 映射到生成的 ComponentFactory 类，
  151.         // 该类可用于创建组件的实例。用于获取给定组件类型的工厂，然后使用工厂的 
  152.         // create() 方法创建该类型的组件。
  153.         const componentFactory = resolver.resolveComponentFactory<T>(portal.component);
  154.         let componentRef: ComponentRef<T>;
  156.         // If the portal specifies a ViewContainerRef, we will use that as the attachment point
  157.         // for the component (in terms of Angular's component tree, not rendering).
  158.         // When the ViewContainerRef is missing, we use the factory to create the component directly
  159.         // and then manually attach the view to the application.
  160.         // 如果 门户 指定了一个ViewContainerRef，我们将使用它作为组件的连接点。
  161.         // 作为该组件的附着点（就Angular的组件树而言，而不是渲染）。
  162.         // 当ViewContainerRef缺失时，我们会使用工厂直接创建组件。
  163.         // 然后手动将视图附加到应用程序中。
  164.         if (portal.viewContainerRef /* 存在viewContainerRef，则使用它作为组件的连接点 */) {
  165.             // componentRef = portal.viewContainerRef.createComponent(
  166.             //   componentFactory,
  167.             //   portal.viewContainerRef.length,
  168.             //   portal.injector || portal.viewContainerRef.injector,
  169.             // );
  170.             componentRef = portal.viewContainerRef.createComponent(
  171.                 portal.component,
  172.                 {
  173.                     index: portal.viewContainerRef.length,
  174.                     injector: portal.injector || portal.viewContainerRef.injector
  175.                 }
  176.             );
  178.             this.setDisposeFn(() => componentRef.destroy());
  179.         } /* viewContainerRef缺失 */ else {
  180.             // 我们会使用工厂直接创建组件。
  181.             componentRef = componentFactory.create(portal.injector);
  182.             // 然后手动将视图附加到应用程序中。
  183.             /**
  184.              * 附上一个视图，这样它就会被脏检查。
  185.              * 当视图被销毁时，它将被自动分离。
  186.              * 如果视图已经被附加到一个ViewContainer上，这将被抛出。
  187.              */
  188.             this.app.attachView(componentRef.hostView);
  189.             this.setDisposeFn(() => {
  190.                 /**
  191.                  *将一个视图再次从脏检查中分离出来。
  192.                 */
  193.                 this.app.detachView(componentRef.hostView);
  194.                 componentRef.destroy();
  195.             });
  196.         }
  197.         // At this point the component has been instantiated, so we move it to the location in the DOM
  198.         // where we want it to be rendered.
  199.         // 此时，组件已被实例化，因此我们将其移动到 DOM 中的位置
  200.         // 我们希望它在哪里渲染。
  201.         this.out.appendChild(this._getComponentRootNode(componentRef));
  202.         this._attachedPortal = portal;
  204.         return componentRef;
  205.     }
  207.     /** 设置处理方式 */
  208.     setDisposeFn(fn: () => void) {
  209.         this._disposeFn = fn;
  210.     }
  212.     destory() {
  213.         this.detach()
  214.     }
  216.     detach(): void {
  217.         if (this._attachedPortal) {
  218.             // this._attachedPortal.setAttachedHost(null);
  219.             this._attachedPortal = null;
  220.         }
  222.         this._invokeDisposeFn();
  223.     }
  225.     private _invokeDisposeFn() {
  226.         if (this._disposeFn) {
  227.             this._disposeFn();
  228.             this._disposeFn = null;
  229.         }
  230.     }
  231. }

后续加注释和思路。
项目地址中注释已添加，主要是如何在Angular中动态创建一个组件，然后添加到Dom中去。
待续~