从源码看从源码看angular/material2 中中 dialog模块的实现方法模块的实现方法
主要介绍了 从源码看angular/material2 中 dialog模块的实现方法,需要的朋友可以参考下
本文将探讨material2中popup弹窗即其Dialog模块的实现。
使用方法使用方法
1. 引入弹窗模块
2. 自己准备作为模板的弹窗内容组件
3. 在需要使用的组件内注入 MatDialog 服务
4. 调用 open 方法创建弹窗，并支持传入配置、数据，以及对关闭事件的订阅
深入源码深入源码
进入material2的源码，先从 MatDialog 的代码入手，找到这个 open 方法:
open<T>(
componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
config?: MatDialogConfig
): MatDialogRef<T> {
// 防止重复打开
const inProgressDialog = this.openDialogs.find(dialog => dialog._isAnimating());
if (inProgressDialog) {
return inProgressDialog;
}
// 组合配置
config = _applyConfigDefaults(config);
// 防止id冲突
if (config.id && this.getDialogById(config.id)) {
throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`);
}
// 第一步：创建弹出层
const overlayRef = this._createOverlay(config);
// 第二步：在弹出层上添加弹窗容器
const dialogContainer = this._attachDialogContainer(overlayRef, config);
// 第三步：把传入的组件添加到创建的弹出层中创建的弹窗容器中
const dialogRef = this._attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);
// 首次弹窗要添加键盘监听
if (!this.openDialogs.length) {
document.addEventListener('keydown', this._boundKeydown);
}
// 添加进队列
this.openDialogs.push(dialogRef);
// 默认添加一个关闭的订阅 关闭时要移除此弹窗
// 当是最后一个弹窗时触发全部关闭的订阅并移除键盘监听
dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));
// 触发打开的订阅
this.afterOpen.next(dialogRef);
return dialogRef;
}
总体看来弹窗的发起分为三部曲:
1. 创建一个弹出层(其实是一个原生DOM，起宿主和入口的作用)
2. 在弹出层上创建弹窗容器组件(负责提供遮罩和弹出动画)
3. 在弹窗容器中创建传入的弹窗内容组件(负责提供内容)
弹出层的创建弹出层的创建
对于其他组件，仅仅封装模板以及内部实现就足够了，最多还要增加与父组件的数据、事件交互，所有这些事情，单使用
angular Component就足够实现了，在何处使用就将组件选择器放到哪里去完事。
但对于弹窗组件，事先并不知道会在何处使用，因此不适合实现为一个组件后通过选择器安放到页面的某处，而应该将其作为
弹窗插座放置到全局，并通过服务来调用。
material2也要面临这个问题，这个弹窗插座是避免不了的，那就在内部实现它，在实际调用弹窗方法时动态创建这个插座就
可以了。要实现效果是：对用户来说只是在单纯调用一个 open 方法，由material2内部来创建一个弹出层，并在这个弹出层上
创建弹窗。
找到弹出层的创建代码如下:
create(config: OverlayConfig = defaultConfig): OverlayRef {
const pane = this._createPaneElement(); // 弹出层DOM 将被添加到宿主DOM中
const portalHost = this._createPortalHost(pane); // 宿主DOM 将被添加到<body>末端
资源评论
