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。

转载于:https://juejin.im/post/5d0664016fb9a07ecf722466