角4のボタンをクリックするとカスタムJavascript機能が実行されます

Question

私は初心者で角度4でログインコンポーネントを作成しています。パスワードを忘れた場合は、私はボタンクリックで呼び出したいrotateCard（this）というjavascript関数を作成しました。これは、HTMLのインラインJavaScriptです。私はcomponent.htmlにhtmlを追加しました。以下はコードです。

が、それはようにエラーを与えている：あなたは誰かが要素をクリックした場合の機能を実行したい場合は

<form (ngSubmit)="doLoginUser()" #login="ngForm" > 

    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="card-container manual-flip"> 
       <div class="card"> 
        <div class="front"> 
         <div class="content"> 
          <div class="main"> 
           <img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" /> 
           <form> 
            <div class="form-group"> 
             <input type="text" class="form-control crm-field" placeholder="Email" 
             id="inputEmail" name="username" ngControl="username" required 
             autofocus [(ngModel)]="username">           
            </div>         
            <div class="form-group"> 
             <input type="password" class="form-control crm-field" name="password" placeholder="Password" 
             id="inputPassword" ngControl="password" required [(ngModel)]="password"> 
            </div>         
            <button type="button" class="btn btn-primary btn-block orange-btn">LOGIN</button> 
           </form> 
           <button class="btn btn-simple login-link" onClick="rotateCard(this)"> 
            Forgot Password 
           </button> 
          </div> 
         </div> 
        </div> <!-- end login --> 
        <div class="back"> 
         <div class="content"> 
          <div class="main"> 
           <img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" /> 
           <p class="title">Forgot Password</p> 
           <form> 
            <div class="form-group"> 
             <input type="text" class="form-control crm-field" name="email" placeholder="Email"> 
            </div> 
            <button type="button" class="btn btn-primary btn-block orange-btn">RESET PASSWORD</button> 
           </form> 
           <button class="btn btn-simple login-link" onClick="rotateCard(this)"> 
            Login 
           </button> 
          </div> 
         </div> 
        </div> <!-- end forgot password --> 
       </div> <!-- end card --> 
      </div> <!-- end card-container --> 
     </div> <!-- end col md 5 --> 
    </div> <!-- end row --> 
    <div class="space-200"></div> 
    </div> 

</form> 

<script src="../../../../js/jquery-3.2.1.min.js" type="text/javascript"></script> 
<script src="../../../../js/bootstrap.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    function rotateCard(btn){ 
     var $card = $(btn).closest('.card-container'); 
     console.log($card); 
     if($card.hasClass('hover')){ 
      $card.removeClass('hover'); 
     } else { 
      $card.addClass('hover'); 
     } 
    } 
</script> 

Answer 1

することはできませんけれども。

1. 私はインストールNPMを使用してインストールjqueryの
2. 。ボタンに "
3. 。rotateCard（これ）を追加しましタイプ="（クリック）=への結合ボタン」プロパティを変更すると、角度-CLIにそれらを追加しました。 JSON

これはjqueryのをロードし、今component.tsで書かれた内部メソッドが呼び出さなっている助けた。

あなたに対応するためのみんなに感謝します。

Answer 2

「にReferenceError rotateCardが定義されていない」、あなたの要素に(click)リスナーを追加することができます。

このよう

：私はあなたを役に立てば幸い

yourFunction() { 
    //your logic 
} 

：

<button (click)="yourFunction()">Send</button> 

次に、あなたのコンポーネントに機能を追加します。公式ドキュメントたい

： https://angular.io/guide/user-input

Answer 3

ドン」トンは、ファイルcomponent.tsにそれを置くのはなぜ？ ...そしてまた、あなたがcss animation directly from Component.ts（https://angular.io/guide/animations）を設定することができます。..

をだからあなたのcomponent.htmlで例えば...のようなものアンギュラ4に覚えている：

<button class="btn btn-simple login-link" (click)="rotateCard()"> 
            Login 
           </button> 

を、あなたComponent.tsファイルに：

​​で

...あなたのComponentClassで、その後の後

declare var $:any; 

rotateCard(){ 
     var $card = $("#USE ID NOT THIS FOR SELECTOR").closest('.card-container'); 
     console.log($card); 
     if($card.hasClass('hover')){ 
      $card.removeClass('hover'); 
     } else { 
      $card.addClass('hover'); 
     } 
    } 

希望すると助かります！

Answer 4

It is inline javascript in html

本当にこれを行うべきではありません。あなたの関数を見ると、これをHTML内に置くのではなく、コンポーネント定義に移すのはかなり簡単です。

部品を見なければ、私は3つの段階でこれを解決することができましたはるかに助け