Question

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

问题建议在论文对话框中调用notifyResize()方法。但我不知道如何在我的角度2 /聚合物类中引用纸张对话框实例。

某种方式导入{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使用deprecated的/ deep /选择器。它不应该通过应用一些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组件（包装纸对话框元素）中你可以这样（类似于例子）：

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（）事件。这反过来又解决了对齐问题。

开放时的中心纸对话

2 个答案: