2016-07-12 2 views
4

Я импортирую диалоговое окно для бумаги из беседки. но я не могу показать диалог с помощью метода open().Использование полимерной бумаги-диалога в приложении angular2 typescript

app.component.html

<paper-icon-button icon="social:person-outline" data-dialog="dialog" id="sing_in_dialog" (click)="clickHandler()"></paper-icon-button> 
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
    <h2>Dialog Title</h2> 
    <p>cia deserunt mollit anim id est laborum.</p> 
</paper-dialog> 

app.component.ts

import { Component,ElementRef, OnInit } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { PolymerElement } from '@vaadin/angular2-polymer'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    events: ['event: iron-overlay-opened', 'event: iron-overlay-closed'], 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [ 
ROUTER_DIRECTIVES, 
PolymerElement('vaadin-combo-box'), 
PolymerElement('paper-button'), 
PolymerElement('paper-scroll-header-panel'), 
PolymerElement('paper-toolbar'), 
PolymerElement('paper-drawer-panel'), 
PolymerElement('paper-header-panel'), 
PolymerElement('paper-toolbar'), 
PolymerElement('iron-icon'), 
PolymerElement('paper-icon-button'), 
PolymerElement('paper-toolbar'), 
PolymerElement('paper-dialog') 
] 
}) 
export class AppComponent { 

constructor() { 
} 
    title = "title"; 

ngOnInit() { 
} 

clickHandler(e) { 
    var dialog = document.getElementById('dialog'); 
    if (dialog) { 
    dialog.open(); 
    } 
} 
} 

это даст ошибку

открывающимися() не HTMLElement функция.

Какая ошибка в моем коде и как мы применяем метод элемента polyemer в машинописном и угловом2. Я использую угловой cli для проекта creat и vaadin для использования полимера в моем приложении. бумага-scrol-header, бумажный ящик и многие другие элементы могут использоваться без ошибок, но когда нам нужно вызвать метод элемента в машинописном машиностроении, получить ошибки, и я не могу разрешить это, и помощь будет рассмотрена.

+0

импортировать «бумажный диалог» в JS –

+0

У меня есть импорт PolymerElement ('paper-dialog') в app.component.ts –

+0

, то, возможно, установка (бумажный диалог) фактически не ввела компонент в ваш проект на пути, где импорт ищет его –

ответ

2

Я просто необходимо изменить функцию clickHandler в.

clickHandler(e) { 
    var dialog :any = document.getElementById('dialog'); 
    if (dialog) { 
    dialog.open(); 
} 

Использование: любой литой элемент html.