本文將探討material2中popup彈窗即其Dialog模塊的實現。
使用方法
- 引入彈窗模塊
- 自己准備作為模板的彈窗內容組件
- 在需要使用的組件內注入
MatDialog服務 - 調用
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;
}
總體看來彈窗的發起分為三部曲:
- 創建一個彈出層(其實是一個原生DOM，起宿主和入口的作用)
- 在彈出層上創建彈窗容器組件(負責提供遮罩和彈出動畫)
- 在彈窗容器中創建傳入的彈窗內容組件(負責提供內容)
彈出層的創建
對於其他組件，僅僅封裝模板以及內部實現就足夠了，最多還要增加與父組件的數據、事件交互，所有這些事情，單使用angular Component就足夠實現了，在何處使用就將組件選擇器放到哪里去完事。
但對於彈窗組件，事先並不知道會在何處使用，因此不適合實現為一個組件后通過選擇器安放到頁面的某處，而應該將其作為彈窗插座放置到全局，並通過服務來調用。
material2也要面臨這個問題，這個彈窗插座是避免不了的，那就在內部實現它，在實際調用彈窗方法時動態創建這個插座就可以了。要實現效果是：對用戶來說只是在單純調用一個 open 方法，由material2內部來創建一個彈出層，並在這個彈出層上創建彈窗。
找到彈出層的創建代碼如下:
create(config: OverlayConfig = defaultConfig): OverlayRef {
const pane = this._createPaneElement(); // 彈出層DOM 將被添加到宿主DOM中
const portalHost = this._createPortalHost(pane); // 宿主DOM 將被添加到<body>末端
return new OverlayRef(portalHost, pane, config, this._ngZone); // 彈出層的引用
}
private _createPaneElement(): HTMLElement {
let pane = document.createElement('div');
pane.id = `cdk-overlay-${nextUniqueId++}`;
pane.classList.add('cdk-overlay-pane');
this._overlayContainer.getContainerElement().appendChild(pane); // 將創建好的帶id的彈出層添加到宿主
return pane;
}
private _createPortalHost(pane: HTMLElement): DomPortalHost {
// 創建宿主
return new DomPortalHost(pane, this._componentFactoryResolver, this._appRef, this._injector);
}
其中最關鍵的方法其實是 getContainerElement() , material2把最"丑"最不angular的操作放在了這里面，看看其實現:
getContainerElement(): HTMLElement {
if (!this._containerElement) { this._createContainer(); }
return this._containerElement;
}
protected _createContainer(): void {
let container = document.createElement('div');
container.classList.add('cdk-overlay-container');
document.body.appendChild(container); // 在body下創建頂層的宿主 姑且稱之為彈出層容器(OverlayContainer)
this._containerElement = container;
}
彈窗容器的創建
跳過其他細節，現在得到了一個彈出層引用 overlayRef。material2接下來給它添加了一個彈窗容器組件，這個組件是material2自己寫的一個angular組件，打開彈窗時的遮罩部分以及彈窗的外輪廓其實就是這個組件，對於為何要再套這么一層容器，有其一些考慮。
-
動畫效果的保護
這樣動態創建的組件有一個缺點，那就是其銷毀是無法觸發angular動畫的，因為一瞬間就銷毀掉了，所以material2為了實現動畫效果，多加了這么一個容器來實現動畫，在關閉彈窗時，實際上是在播放彈窗的關閉動畫，然后監聽容器的動畫狀態事件，在完成關閉動畫后才執行銷毀彈窗的一系列代碼，這個過程與其為難用戶來實現，不如自己給封裝了。 -
注入服務的保護
目前版本的angular關於在動態創建的組件中注入服務還存在一個注意點，就是直接創建出的組件無法使用隱式的依賴注入，也就是說，直接在組件的constructor中聲明服務對象的實例是不起作用的，而必須先注入Injector，再使用這個Injector把注入的服務都get出來:
private 服務;
constructor(
private injector: Injector
// private 服務: 服務類 // 這樣是無效的
) {
this.服務 = injector.get('服務類名');
}
解決的辦法是不直接創建出組件來注入服務，而是先創建一個指令，再在這個指令中創建組件並注入服務使用，這時隱式的依賴注入就又有效了，material2就是這么干的:
<ng-template cdkPortalHost></ng-template>
其中的 cdkPortalHost 指令就是用來后續創建組件的。
所以創建這么一個彈窗容器組件，用戶就感覺不到這一點，很順利的像普通組件一樣注入服務並使用。
創建彈窗容器的核心方法在 dom-portal-host.ts 中:
attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
// 創建工廠
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
let componentRef: ComponentRef<T>;
if (portal.viewContainerRef) {
componentRef = portal.viewContainerRef.createComponent(
componentFactory,
portal.viewContainerRef.length,
portal.injector || portal.viewContainerRef.parentInjector);
this.setDisposeFn(() => componentRef.destroy());
// 暫不知道為何有指定宿主后面還要把它添加到宿主元素DOM中
} else {
componentRef = componentFactory.create(portal.injector || this._defaultInjector);
this._appRef.attachView(componentRef.hostView);
this.setDisposeFn(() => {
this._appRef.detachView(componentRef.hostView);
componentRef.destroy();
});
// 到這一步創建出了經angular處理的DOM
}
// 將創建的彈窗容器組件直接append到彈出層DOM中
this._hostDomElement.appendChild(this._getComponentRootNode(componentRef));
// 返回組件的引用
return componentRef;
}
所做的事情無非就是動態創建組件的四步曲:
- 創建工廠
- 使用工廠創建組件
- 將組件整合進AppRef(同時設置一個移除的方法)
- 在DOM中插入這個組件的原始節點
彈窗內容
從上文可以知道，得到的彈窗容器組件中存在一個宿主指令，實際上是在這個宿主指令中創建彈窗內容組件。進入宿主指令的代碼可以找到 attachComponentPortal 方法:
attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
portal.setAttachedHost(this);
// If the portal specifies an origin, use that as the logical location of the component
// in the application tree. Otherwise use the location of this PortalHost.
// 如果入口已經有宿主則使用那個宿主
// 否則使用 PortalHost 作為宿主
let viewContainerRef = portal.viewContainerRef != null ?
portal.viewContainerRef :
this._viewContainerRef;
// 在宿主上動態創建組件的代碼
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
let ref = viewContainerRef.createComponent( // 使用 ViewContainerRef 動態創建組件到當前視圖容器(也就是彈窗容器指令)
componentFactory, viewContainerRef.length,
portal.injector || viewContainerRef.parentInjector
);
super.setDisposeFn(() => ref.destroy());
this._portal = portal;
return ref;
}
最后這一步就非常明了了，正是官方文檔中使用的動態創建組件的方式(ViewContainerRef)，至此彈窗已經成功彈出到界面中了。
彈窗的關閉
還有最后一個要注意的點就是彈窗如何關閉，從上文可以知道應該要先執行關閉動畫，然后才能銷毀彈窗，material2的彈窗容器組件添加了一堆節點:
host: {
'class': 'mat-dialog-container',
'tabindex': '-1',
'[attr.role]': '_config?.role',
'[attr.aria-labelledby]': '_ariaLabelledBy',
'[attr.aria-describedby]': '_config?.ariaDescribedBy || null',
'[@slideDialog]': '_state',
'(@slideDialog.start)': '_onAnimationStart($event)',
'(@slideDialog.done)': '_onAnimationDone($event)',
}
其中需要關注的就是material2在容器組件中添加了一個動畫叫 slideDialog ，並為其設置了動畫事件，現在關注動畫完成事件的回調:
_onAnimationDone(event: AnimationEvent) {
if (event.toState === 'enter') {
this._trapFocus();
} else if (event.toState === 'exit') {
this._restoreFocus();
}
this._animationStateChanged.emit(event);
this._isAnimating = false;
}
這里發射了這個事件，並在 MatDialogRef 中訂閱:
constructor(
private _overlayRef: OverlayRef,
private _containerInstance: MatDialogContainer,
public readonly id: string = 'mat-dialog-' + (uniqueId++)
) {
// 添加彈窗開啟的訂閱 這里的 RxChain 是material2自己對rxjs的工具類封裝
RxChain.from(_containerInstance._animationStateChanged)
.call(filter, event => event.phaseName === 'done' && event.toState === 'enter')
.call(first)
.subscribe(() => {
this._afterOpen.next();
this._afterOpen.complete();
});
// 添加彈窗關閉的訂閱，並且需要在收到回調后銷毀彈窗
RxChain.from(_containerInstance._animationStateChanged)
.call(filter, event => event.phaseName === 'done' && event.toState === 'exit')
.call(first)
.subscribe(() => {
this._overlayRef.dispose();
this._afterClosed.next(this._result);
this._afterClosed.complete();
this.componentInstance = null!;
});
}
/**
* 這個也就是實際使用時的關閉方法
* 所做的事情是添加beforeClose的訂閱並執行 _startExitAnimation 以開始關閉動畫
* 底層做的事是 改變了彈窗容器中 slideDialog 的狀態值
*/
close(dialogResult?: any): void {
this._result = dialogResult; // 把傳入的結果賦值給私有變量 _result 以便在上面的 this._afterClosed.next(this._result) 中使用
// Transition the backdrop in parallel to the dialog.
RxChain.from(this._containerInstance._animationStateChanged)
.call(filter, event => event.phaseName === 'start')
.call(first)
.subscribe(() => {
this._beforeClose.next(dialogResult);
this._beforeClose.complete();
this._overlayRef.detachBackdrop();
});
this._containerInstance._startExitAnimation();
}
總結
以上就是整個material2 dialog能力走通的過程，可見即使是 angular 這么完善又龐大的框架，想要完美解耦封裝彈窗能力也不能完全避免原生DOM操作。
除此之外給我的感覺還有——無論是angular還是material2，它們對TypeScript的使用都讓我自嘆不如，包括但不限於抽象類、泛型等裝逼技巧，把它們的源碼慢慢看下來，着實能學到不少東西。