Javascript 从 HTML 调用打字稿文件中的函数。

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/37264680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 20:06:57  来源:igfitidea点击:

Calling a function in a typescript file from HTML.

javascripthtmlangularjstwitter-bootstrapangular

提问by Roka545

I'm new to HTML and Angular 2. I'm currently trying to figure out how to call a function that's inside a Typescript file from an HTML file.

我是 HTML 和 Angular 2 的新手。我目前正试图弄清楚如何从 HTML 文件调用 Typescript 文件中的函数。

Stripped down, the Typescript file (home.ts) function looks like this:

精简后,Typescript 文件 (home.ts) 函数如下所示:

getConfigurations(sensorName: string) {
    console.log('Home:getConfigurations entered...');

    return 'sensor1';
}

In my HTML file (home.html), I would like to call 'getConfigurations' with a string parameter (right now 'getConfigurations()' returns 'sensor1' since I'm still testing things out). So, in HTML, how do I go about calling my getConfigurations method with a parameter (for simplicity - how can I call the method inside a simple div panel)? (I already have the value I want to pass in a variable called 'selectedSensor').

在我的 HTML 文件 (home.html) 中,我想使用字符串参数调用“getConfigurations”(现在“getConfigurations()”返回“sensor1”,因为我仍在测试中)。那么,在 HTML 中,如何使用参数调用我的 getConfigurations 方法(为简单起见 - 如何在简单的 div 面板中调用该方法)?(我已经有了要传递给名为“selectedSensor”的变量的值)。

回答by Pardeep Jain

There is feature provided by angular is events binding by using you are able to call function whihc is exist in your ts file also you can use interpolation syntax of angular to call function like this : -

angular 提供的功能是事件绑定,通过使用您可以调用 ts 文件中存在的函数,您也可以使用 angular 的插值语法来调用这样的函数:-

<button (click)='getConfigurations("parameter")'>Button Click</button>

or something like this

或类似的东西

{{getConfigurations('parameter')}}  

for more info related to event binding in angular2 see here

有关 angular2 中事件绑定的更多信息,请参见此处

working example Working Plunker

工作示例 Working Plunker