2016-07-12 6 views
4

私はbowerからペーパーダイアログをインポートしました。 open()メソッドを使ってダイアログを表示することはできません。それがエラーに開くangular2タイプスクリプトアプリで高分子紙のダイアログを使用

を与えるのです

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要素のメソッドをtypescriptとangular2で起動しますか?私はアプリケーションでポリマーを使用するために、プロジェクトとバーディを作成するために、角度のあるcliを使用しています。紙のスクロールヘッダー、紙の引出しなど多くの要素がエラーなく使用できますが、要素のメソッドをtypescriptで呼び出す必要があるときにエラーが発生し、この問題を解決できず、助けが得られます。

+0

import the "paper-dialog" in JS –

+0

import PolymerElement( 'paper-dialog')がapp.component.ts –

+0

にあります。インストール(paper-dialog)がプロジェクトに実際にコンポーネントを挿入しなかった可能性があります。輸入がそれを探している道で –

答えて

2

clickHandler関数を..に変更する必要があります。

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

を使用すると、任意のhtml要素がキャストされます。

関連する問題