Question

我已经搜索了一段时间，但我觉得这是基础知识之一，所以没有人不愿再解释它了......

这是我的问题。

我正在使用TypeScript编写一个组件，它是ASPNET核心2和角度项目的一部分。

TS文件：

import { Component } from '@angular/core';

@Component({
    selector: 'clients',
    templateUrl: './clients.component.html',
    styleUrls: ['./clients.component.css']
})

export class ClientsComponent{
    rows: Array<any>;

    constructor() {
        let btn = document.getElementById("coolbutton");
        if (btn === null) return;
        btn.addEventListener("click", (e: Event) => this.ClickMeButton());
    }

    ClickMeButton() {
        alert("toto");
    }
}

HTML文件：

<input type="button" value="Click" id="coolbutton"/>

但是当页面加载时会出现错误：

An unhandled exception occurred while processing the request.
NodeInvocationException: Uncaught (in promise): ReferenceError: document is 
not defined

我无法找到有关如何在我的TS组件中导入文档的任何解释......

Answer 1

只需将(click)放在元素上并调用您的函数：

import { Component } from '@angular/core';

@Component({
    selector: 'clients',
    templateUrl: './clients.component.html',
    styleUrls: ['./clients.component.css']
})

export class ClientsComponent{

    constructor() {}

    public clickMeButton(): void {
        alert("toto");
    }
}

<input type="button" value="Click" (click)="clickMeButton()"/>

ASPNET核心2中的打字稿与angular - acces html文档

1 个答案: