центральная бумага-диалог при открытии

Question

Я пытаюсь создать простое окно входа в систему, используя Angular 2 и Polymer 1.0.2. Это в основном документ-диалог (окно входа в систему) с контентом. Диалоговое окно, однако, не расположено в центре экрана, см. Этот bugreport Dialog not centered until window resize #36:

Проблема предполагает вызов метода notifyResize() в диалоговом окне бумаги. Но я не знаю, как обратиться к экземпляру paper-dialog в моем угловом классе 2/polymer.

Как-то импорт {PaperDialog} не разрешен, но поиск в документе-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. И это не должно быть исправлено, применяя некоторые css, не так ли?

Answer 1

Вместо того, чтобы мой код исправил код поведения диалогового окна, лучше всего решить проблему. Добавить вызов this.notifyResize(); в метод _onIronOverlayOpened в источнике paper-dialog-behavior.html.

... 
_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() в диалоговом окне. Это, в свою очередь, устраняет проблему выравнивания.