Angluar-模态视图构建简析（A）

在一般的开发中，如果要创建一个模态视图，基本的思路是创建一个不可见的顶层视图，然后在需要的时候，展示这个顶层视图，那么基本的模态视图就创建完成了。

在Angluar中，我们可以使用 CDK(component dev kit) 中的 Overlay 来构建模态视图，它把模态的构建过程抽象出来，形成了一个可复用的组件。

准备工作

首先，简单的介绍一下CDK：

The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design. Think of the CDK as a blank state of well-tested functionality upon which you can develop your own bespoke components.

简单的翻译一下，就是：

CDK 是一个这样的 工具 集，它实现了一系列通用的交互模式，同时不会去影响他们的展示效果。它是 Angluar Material 组件库中没有特定于 Material Design 样式的核心功能的抽象。将CDK视为经过良好测试的功能的空状态，您在它上构建自己的定制组件。

如果你不使用 Angluar Material 来构建你的应用，那么需要就引入 CDK 。

npm i @angular/cdk --save
复制代码

引入完毕后，就可以开始我们的空状态模态框的构建。

使用Overlay

Overlay 是一个工厂类，它每次调用 create 都会创建一个 OverlayRef ，然后我们就使用 OverlayRef 来将要展示的内容附在上面（调用 attach ）。

那么接下来，就要说明一下， overlayRef 创建后如何展示我们的视图。首先，我们通过以下代码来创建一个简单的 overlayRef 。

const overlayRef = this.overlay.create();
复制代码

创建完毕后，使用 overlayRef 的 attach 函数来展示视图。 attach 函数接受一个参数，这个参数的类型可以是 TemplatePortal 或者 ComponentPortal 。

那么，这两个 Portal 的作用是显而易见，要么获取已存在的嵌入视图（ TemplatePortal ），要么动态创建宿主视图（ ComponentPortal ）。当然，这两个 Portal 的构造过程也不尽相同。

TemplatePortal ：接受两个参数，第一个参数是模板引用，第二个参数是当前的视图容器。

ComponentPortal ：接受一个参数，其为组件构造函数。 很显然动态创建组件需要在 module 或者宿主组件的 entryComponents 属性添加需要的被创建组件。

创建完后，代码如下：

// Template形式
@ViewChild('someTemplate')
templateRef: TemplateRef;
...
const portal = new TemplatePortal(templateRef, viewContainerRef);
overlayRef.attach(portal);

// component的形式
const portal = new ComponentPortal(YourComponent);
overlayRef.attach(portal);
复制代码

构建可复用Overlay

通过依赖注入的方式，我们可以引入Overlay到一个可注入服务或者组件中。这里，为了抽象，引入 Overlay 到一个可注入服务—— ModalService 。

export class ModalService {
	constructor(private overlay: Overlay) {}
}
复制代码

就要构建一个通用的调用方法：

// 这里要注意，`TemplatePortal`第二个参数在要视图组件中通过依赖注入才能拿到正确的引用。
// 原因也很简单，Angular的`Service`是通过`Injector`来构建的，
// `Injector`会在应用初始化的时候创建，
// 此时`Service`已经生成，而`ViewContainerRef`仍未生成，从而导致依赖错误。
// 所以，我们把`ViewContainerRef`当作参数，而不能当作注入对象。
openTemplate<T>(templateRef: TemplateRef<T>, viewContainerRef: ViewContainerRef) {
    const config = new OverlayConfig();
    // ...setup your config
    const overlayRef = this.overlay.create(config);
    const portal = new TemplatePortal(templateRef, viewContainerRef);
    overlayRef.attach(portal);
    return overlayRef;
}
复制代码

这样，一个通用的 ModalService 就构建完毕了。

总结

简单的介绍了如何使用 Overlay ，以及一个简单的可复用 ModalService 的构建。希望能够对你了解整个 Overlay 的使用过程有所帮助，下一篇将介绍如何构建可复用的 ModalComponent 。