本文將探討material2中popup彈窗即其Dialog模塊的實現。
使用方法
深入源碼
進入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;}總體看來彈窗的發起分為三部曲:
彈出層的創建
對于其他組件，僅僅封裝模板以及內部實現就足夠了，最多還要增加與父組件的數據、事件交互，所有這些事情，單使用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;}所做的事情無非就是動態創建組件的四步曲:
彈窗內容
從上文可以知道，得到的彈窗容器組件中存在一個宿主指令，實際上是在這個宿主指令中創建彈窗內容組件。進入宿主指令的代碼可以找到 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的使用都讓我自嘆不如，包括但不限于抽象類、泛型等裝逼技巧，把它們的源碼慢慢看下來，著實能學到不少東西。
新聞熱點
疑難解答
