1つのモーダルを閉じて別のモザールを開こうとしていますが、どちらも閉じています

Question

私は4番、ブートストラップ4（ベータ）、ngx-bootstrapを使用しています。どのページでも警告ダイアログとして機能するモーダルサービスを作成しようとしています。問題は、私がtestモーダルを閉じて、alertモーダルを開いてみようとしていますが、が両方を隠しているので、alertModalは私が推測していません。

私は間違っていますか？

test.htmlという

<div bsModal #newBidModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog w-100"> 
     <div class="modal-content w-100"> 
      <form class="form-group" [formGroup]="testForm" (ngSubmit)="onSubmit(testForm.value)"> 
      </form 
     </div> 
    </div> 
</div> 


<app-modal #childModal [title]="'Modal'"> 
    <div class="modal-body"> 
    {{message}} 
    </div> 
</app-modal> 

test.component.ts

export class TestComponent implements OnInit { 
    TestComponent: any; 

    @ViewChild('childModal') childModal: ModalComponent; 
    message: string; 

    constructor(public bsModalRef: BsModalRef){} 

    onSubmit(input:any) { 
    this.API.post(input).subscribe(data => { 
     this.bsModalRef.hide(); 
     this.alert(); 
    }); 
    } 
} 

alert() { 
    this.childModal.title = 'hi'; 
    this.message = 'test'; 
    this.childModal.show(); 
} 

アラートmodal.html

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title pull-left">{{title}}</h4> 
     <button type="button" class="close pull-right" (click)="childModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <ng-content select=".modal-body"> </ng-content> 
     </div> 
     <div class="modal-footer"> 
     <div class="pull-left"> 
      <button class="btn btn-default" (click)="childModal.hide()"> Cancel </button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

アラートmodal.ts

export class AlertModalComponent implements OnInit { 

    @ViewChild('childModal') public childModal: ModalDirective; 

    @Input() title: string; 
    constructor() { 
    } 
    show() { 
    this.childModal.show(); 
    } 
    hide() { 
    this.childModal.hide(); 
    } 
} 

Answer 1

私は角度jで動作していないか、 "ngx-bootstrap"を使用していますが、達成したいのが "1つのモードを閉じて別のモードを開く"の場合、ブートストラップでは、data-toggleとdata-targetを最初のモーダル閉じて次のモーダルを開きます。最初の1が閉じている場合は、id exampleModal2が開かれることになると、ここに

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <!-- rest of modal content here, closing button targets exampleModal2 --> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="modal" data-target="#exampleModal2"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
</div> 

第二モーダル：このモーダルを対象

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
     Launch First Modal 
</button> 

：

あなたがモーダルボタンを持っていると言います。

<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true"> 
    <!-- Modal content --> 
</div> 

はフィドルhere