打字稿中的 OnClick 事件
Posted
技术标签:
【中文标题】打字稿中的 OnClick 事件【英文标题】：OnClick event in typescript 【发布时间】：2018-05-03 11:52:24 【问题描述】：我的 onclick 事件在 Angular 2 应用程序中不起作用。以下是我的代码：
html- (home.component.html)：我的完整 HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Iroz-V3 - Sutherland Global Services</title>
<link href="../../Content/style.css" rel="stylesheet" />
<script src="../../Scripts/jquery.js"></script>
</head>
<body class="login_bg">
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div class="program-wrap">
<div class="log_wrap">
<div class="log_img"></div>
<ul class="log_list">
<li>
USER ID<br>
<input class="log_input" id="NtLogin" placeholder="NT Login ID" type="text">
</li>
<li>
PASSWORD<br>
<input class="log_input" placeholder="*******" type="password">
</li>
<li>
<input type="button" class="reset_but" value="Reset" />
<a class="india panel">
<input type="button" class="log_but" value="Login" (Click)="login_btnClick()" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
TS-(home.component.ts)：我的完整 TS 文件
import Component, OnInit from "@angular/core";
@Component(
template: `app/Components/home.component.html`
)
export class HomeComponent implements OnInit
ngOnInit()
public login_btnClick()
console.log("function called");
alert("login");
它甚至没有调用该函数，也没有在控制台中显示任何错误。
【问题讨论】：
“不工作”到底是什么意思？您问题中的信息没有提供足够的信息来调试问题。可以在stackblitz.com复现吗？ 它甚至没有调用该函数，并且在控制台中也没有显示任何错误。 您问题中的信息没有提供足够的信息来调试问题。可以在stackblitz.com复现吗？ 尝试使用控制台代替警报。 已经用控制台试过了。它不工作。 @Ankit 【参考方案1】：import Component, OnInit from "@angular/core";
@Component(
selector: 'app-root',
template: `<button (click)="login()">Click</button>`
)
export class HomeComponent implements OnInit
ngOnInit()
login()
alert("login");
你的语法是
template: app/Components/home.component.html
改成
templateUrl: './home.component.html'
【讨论】：
hello @Depi 使用它并删除您的 home.component.html。模板：`' talkingdotnet.com/how-to-bind-click-event-angular-2 看看这个网站的语法【参考方案2】：您需要使用"" 在您的 HTML 中调用函数。
<button class="log_but" value="Login" id="login" (click)="login()">Login</button>
另外，如前所述，您的home.component.ts 需要使用templateUrl 而不是template。您还需要为您的组件创建一个构造函数。
@Component(
selector: 'app-root',
templateUrl: 'home.component.html'
)
export class HomeComponent implements OnInit
constructor()
ngOnInit()
login()
alert('login clicked');
编辑
如评论中所述，您的(Click) 应为小写，(click)。
【讨论】：
这也不起作用。不，它没有给出任何控制台错误。 :( 只是一个问题，您是在 home.module.ts 中导入 CommonModule 吗？ 不，我没有导入 CommonModule @wesley 帮帮我，我仍然遇到同样的问题。 你能发布你的 home.module.ts 吗？以上是关于打字稿中的 OnClick 事件的主要内容，如果未能解决你的问题，请参考以下文章