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的使用都让我自叹不如，包括但不限于抽象类、泛型等装逼技巧，把它们的源码慢慢看下来，着实能学到不少东西。
您可能感兴趣的文章: