Question

我从凉亭那里导入了纸质对话框。但我无法使用open（）方法显示对话框。

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();
  }
}
}

它给出了错误

open（）不是HTMLelement函数。

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

Answer 1

我只需将clickHandler函数更改为..

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

使用：任何强制转换html元素。

在angular2打字稿应用程序中使用聚合物纸对话框

1 个答案: