我从凉亭那里导入了纸质对话框.但我无法使用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('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的方法获取错误时我无法解决这个问题,并且帮助会很复杂.
解决方法
我只需将clickHandler函数更改为..
clickHandler(e) {
var dialog :any = document.getElementById('dialog');
if (dialog) {
dialog.open();
}
使用：任何强制转换html元素.
