タイプクリプトのOnClickイベント

-4

私のonclickイベントは、角度2のアプリケーションでは機能しません。以下は、私のコードは次のとおりです。タイプクリプトのOnClickイベント

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"); 
    } 
}

これは関数を呼び出すことさえせず、コンソールにエラーを表示しません。

出典

2017-11-20 Depi

"機能しない"とはどういう意味ですか？あなたの質問の情報は、問題をデバッグするのに十分な情報を提供していません。 http://stackblitz.comで再現できますか？ –

これは、関数を呼び出すことさえせず、コンソールでもエラーを表示しません。 – Depi

質問の情報は、問題をデバッグするのに十分な情報を提供していません。 http://stackblitz.comで再現できますか？ –

へ

template: app/Components/home.component.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'); 
    } 
}

コメントで述べたようにEDIT

、あなたの(Click)は(click)、小文字でなければなりません。

出典

2017-11-20 09:56:26

その機能していません。:( – Depi

これも働いていません。ノーのは、任意のコンソールエラーを与えていない。:( – Depi

をちょうど質問、あなたはhome.module.ts内CommonModuleをインポートしている？ –

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"); 
    } 
}

あなたの構文は、あなたのHTML内の関数呼び出しのための""を使用する必要が

templateUrl: './home.component.html'

出典

2017-11-20 09:52:29

が動作しません:( – Depi

hello @Depiこれを使用してhome.component.htmlテンプレートを削除してください： ' –

http：//をクリックしてくださいwww.talkingdotnet.com/how-to-bind-click-event-angular-2/ ur構文でこのサイトを確認する –

タイプクリプトのOnClickイベント

答えて

関連する問題