Question

我的onclick事件在角度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");
    }
}

它甚至没有调用该函数，也没有在控制台中显示任何错误。

Answer 1

您需要在HTML中使用{{ function renderCategories(categories, selected, button_edit, column_sort_order, column_name, column_action) }}进行函数调用。

""

此外，如上所述，您的<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)。

Answer 2

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'

打字稿中的OnClick事件

2 个答案: