입력 스크립트, 버튼을 클릭했을 때 부트 스트랩 드롭 다운이 닫히는 것을 방지합니다.

Question

간단한 부트 스트랩 드롭 다운을 사용하여 등록 또는 로그인합니다. 드롭 다운 안에 "계정이 없습니까?"와 같은 텍스트와 버튼이 있습니다. "이미 계정이 있습니까? 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 속성을 드롭 다운으로 지정해야합니다.