带有角度的 ASP NET Core 2 中的打字稿 - 访问 html 文档

Question

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

这是我的问题。

我正在用 TypeScript 编写一个组件，它是 ASPNET core 2 和 Angular 项目的一部分。

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()"/>