打开时的中心纸张对话框答案

【问题标题】：center paper-dialog upon opening打开时的中心纸张对话框
【发布时间】：2015-11-11 12:40:12
【问题描述】：

我正在尝试使用 Angular 2 和 Polymer 1.0.2 创建一个简单的登录窗口。它基本上是一个包含内容的纸质对话框（登录窗口）。然而，对话框并不位于屏幕的中心，请参阅此错误报告Dialog not centered until window resize #36：

问题建议在纸质对话框上调用notifyResize() 方法。但我不知道如何在我的 angular 2/polymer 类中引用纸质对话框实例。

不知何故，导入 {PaperDialog} 没有解决，但查看 paper-dialog.html 让我想知道这样的导入是否可能。

import {Component, View} from 'angular2/angular2';
import {PaperDialog} from 'bower_components/paper-dialog/paper-dialog';

@Component({
  template: `
    <paper-dialog open> 
    ...  
    </paper-dialog>
  `,
  selector: 'login-window',
  directives : [PaperDialog]
})
export class LoginWindow {
  email: string;
  password: string;
  constructor(){
    this.email = '';
    this.password = '';

    // Where and how to call the PaperDialog child's notifyResize() method
  }
}

请注意，我不是以编程方式打开对话框 (fix described here)。 This solution 使用 /deep/ 选择器 deprecated。而且它不应该通过应用一些 css 来修复，不是吗？

【问题讨论】：

要从template 属性中获取PaperDialog 的引用，假设您只有一个，您必须使用@ViewChild 来获取它的引用。您可以设置一个 plnkr 以更仔细地查看它会很有用。

标签： material-design polymer-1.0 angular paper-elements

【解决方案1】：

与其让我的代码修复纸质对话行为的代码，不如自己解决问题。将调用 this.notifyResize(); 添加到 paper-dialog-behavior.html 源中的 _onIronOverlayOpened 方法。

...
_onIronOverlayOpened: function() {
   if (this.modal) {
     document.body.addEventListener('focus', this._boundOnFocus, true);
     this.backdropElement.addEventListener('click', this._boundOnBackdropClick);
   }
   this.notifyResize(); // Added this line
},
...

虽然这解决了我简单的纸质对话中心问题，但我还不能监督其他元素和代码的后果。

【讨论】：

人们总是可以用您上面提到的方法覆盖纸质对话框中的方法。这样它就不会干扰其他元素

【解决方案2】：

您也可以通过以下方式修复它：

在一个 angular2 组件（包装纸对话元素）中，您可以这样做（Typescript 示例）：

interface PaperDialog extends HTMLElement {
    notifyResize(): void;
}
@Component({
  selector: 'login'
})
@View({
  templateUrl: 'app/components/ts-login-window/ts-login-window.html'
})
export class LoginWindow {
    email: string;
    password: string;
    dialogWindow: PaperDialog;

    private bindIronOverlayOpened: EventListenerObject;

    constructor(elementRef: ElementRef){
       this.dialogWindow = elementRef.nativeElement.children[0];

       this.bindIronOverlayOpened = this.ironOverlayOpened.bind(this);
       this.dialogWindow.addEventListener('iron-overlay-opened', this.bindIronOverlayOpened);
    }

    ironOverlayOpened(event: Event) {
        this.dialogWindow.notifyResize();
    }

    onDestroy() {
        this.dialogWindow.removeEventListener('iron-overlay-opened', this.bindIronOverlayOpened);
    }
}

一旦纸质对话框打开（通过事件iron-overlay-opened），您可以在对话框上触发 notifyResize() 事件。这反过来又解决了对齐问题。

【讨论】：