Typescript、ボタンがクリックされたときにブートストラップドロップダウンが閉じるのを防ぐ

Question

簡単なブートストラップドロップダウンを使って登録やログインを行います。ドロップダウンの中にテキストとボタンがあります。「アカウントがありませんか？register」、「既にアカウントがありますか？ login」です。 registerおよびloginは、フォームを変更するためのボタンです。ボタンがクリックされたときにドロップダウンが閉じられ、もう一度クリックするとドロップダウンが開き、別のフォームを表示/使用する必要があります。これらのボタンがクリックされたときに、このブートストラップのドロップダウンが閉じないようにしたかったのです。ドロップダウンはapp.componentの内部にあり、フォームはapp.parentの内部にあります。私は角度cliのタイスクリプトを使用しています。

//component.ts 
 
changeForm() { 
 
    this.isNewUser = !this.isNewUser 
 
}

<!--app.component.html--> 
 
<div> 
 
    <ul class="nav navbar-nav"> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" auto-close="disabled">REGISTER/LOGIN <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
     <app-parent></app-parent> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<!--parent.component.html--> 
 
<div *ngIf="isNewUser"> 
 
    <p *ngIf="errorMessage.length > 0" class="text-danger">{{errorMessage}}</p> 
 
    <p *ngIf="error.message.length > 0" class="text-danger">{{error.message}}</p> 
 
    <form (ngSubmit)="onSignUp()">...</form> 
 
    <h4 class="text-primary">Already have an Account? <button type="submit" href="#" class="btn btn-primary btn-xs" (click)="changeForm()">Log In</button></h4> 
 
</div> 
 

 
<div *ngIf="!isNewUser"> 
 
    <p *ngIf="errorMessage.length > 0" class="text-danger">{{errorMessage}}</p> 
 
    <p *ngIf="error.message.length > 0" class="text-danger">{{error.message}}</p> 
 
    <form (ngSubmit)="onLoginEmail()">...</form> 
 
    <h4 class="text-primary">Not have any Account yet? <button type="submit" href="#" class="btn btn-success btn-xs" (click)="changeForm()">Register</button></h4> 
 
</div>

Answer 1

ちょうどevent.stopPropagation();​機能を使用して答えを見つけて、私のchangeForm()機能の中に入れてください。

changeForm() { 
 
    this.isNewUser = !this.isNewUser; 
 
    event.stopPropagation();​ 
 
}

Answer 2

アプリのプロジェクトにjqueryのが含まれている場合は、どのようにコンポーネントファイルにするvar $を書きます。あなたのchangeForm関数に$（ "＃dropdown"）を書くことができます。addClass（ 'open'）; id属性をドロップダウンとする必要があります。