纸张居中-打开时的对话框

Question

我正在尝试使用Angular 2和Polymer 1.0.2创建一个简单的登录窗口。它基本上是一个带有内容的纸质对话框(登录窗口)。但是，该对话框并不位于屏幕的中心，请参阅此bugreport Dialog not centered until window resize #36：

该问题建议在纸张对话框上调用notifyResize()方法。但是我不知道如何在我的angular 2/聚合物类中引用paper-dialog实例。

不知何故，导入{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来修复，不是吗？

Answer 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
},
...

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

Answer 2

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

在angular2组件(包装了paper-dialog元素)中，您可以这样做(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);
    }
}

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