角度2のタイスクリプトを使用してブートストラップモーダルを閉じます

Question

ボタンをクリックして、ブートストラップモーダルポップアップを開きます。モーダルポップアップには、送信ボタン付きのフィールドがいくつかあります。データの保存が完了したときにのみポップアップを閉じたいと思います。私はユーザーがボタンを押した直後にポップアップを閉じるので、データを消すことはできません。タイスクリプトを使ってポップアップを閉じる方法はありますか？

expense.component.html

<div id="AddExpense" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Add Expense</h4> 
       </div> 
       <div class="modal-body"> 
        <form id="form" (ngSubmit)="saveExpense();"> 
         <div class="form-group"> 
          <table class="table table-responsive" style="border:0"> 
           <tr *ngFor="#column of columnInputs" style="height:20px;"> 
            <td class="text-right" style="padding-top:10px;border:0"> 
             <h4> {{column.name | case}}: </h4> 
            </td> 
            <td class="text-center" style="padding-top:10px;border:0"> 
             <input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" /> 
             <select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required> 
              <option value="status">--Select--</option> 
              <option value="1">Paid</option> 
              <option value="2">Unpaid</option> 
             </select> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <div class="form-group"> 
          <button type="submit" class="btn btn-primary btn-lg"> Add Expense </button> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

私はあなたが本当に何をする必要があるかはよく分からないが、あなたはtypescriptですとモーダルを閉じたい場合は、ちょうどあなたのhtmlモーダルにIDを与えると「非表示を呼び出すことができます' 方法。これはあなたが私をもっとよく説明できる場合、私はあなたを助けることができるかもしれ望むものではない場合

$('#newPostModal').modal('hide');  

申し訳

あなたは閉じるボタン

<div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" #closeAddExpenseModal>&times;</button> 
       <h4 class="modal-title">Add Expense</h4> 
      </div> 

にして、コントローラにアクションを使用することができます

Answer 2

あなたはあなたが使用するアクションの後にこの行を追加することができます

this.closeAddExpenseModal.nativeElement.click(); 

これをあなたのcontに追加する必要がありますローラー

import { ViewChild, ElementRef} from '@angular/core'; 

あなたは私はあなたがモーダルのangular2実装としたほうが良いと思うcloseAddExpenseModal

@ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;