Question

我是打字稿的新手。我有一个查询，当你点击一个html按钮时，如何从.html页面调用.ts文件中的方法

.ts文件

class AdminTS {
    public alertMessageTS() {
        alert("This is the test call!!!.");
    }
}

.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Sample TypeScript page
    </title>
    <script src="AdminTS.js"></script>
</head>
<body>
    <input type="button" value="Click" onclick ="getTrainingName(1)">
    </input>
</body>
</html>

我收到一个运行时异常，说getTrainingName未定义。

Answer 1

getTrainingName()从未在您的示例代码中定义，也许您忘了添加该部分？

我建议你不要在你的html中使用javascript，而是使用addEVentListener向dom元素添加处理程序。然后，您的所有应用程序逻辑都将位于*.ts个文件中。

（既然你已经使用过typescript，那么在html中添加内联j就更没意义了）

.html文件

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

.ts文件

class AdminTS {
  constructor() {
    let btn = document.getElementById("coolbutton");
    btn.addEventListener("click", (e:Event) => this.getTrainingName(4));
  }
  getTrainingName(n:number){
     // button click handler
  }
}

// start the app
new AdminTS();

Answer 2

html：

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

ts：

    getTrainingName(){ alert('solved!!'); }

Angular 5，打字稿解决方案

从你的html按钮onclick事件中调用typescript方法

2 个答案: