在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('iron-icon'),PolymerElement('paper-icon-button'),PolymerElement('paper-dialog')
]
})
export class AppComponent {

 constructor() {
 }
   title = "title";

 ngOnInit() {
 }

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

这是错误的

that open() is not HTMLelement function.

我的代码中的错误是什么以及我们如何在typescript和angular2中触发polyemer元素的方法.我正在使用角度cli创建项目和vaadin在我的应用程序中使用聚合物. paper-scrol-header,paper-drawer和许多其他元素可以使用而不会出错但是当我们需要在typescript中调用element的方法获取错误时我无法解决这个问题,并且帮助会很复杂.