J'essaie de fermer un modal et d'en ouvrir un autre mais les deux maintiennent la fermeture

Question

J'utilise angular 4, bootstrap 4 (bêta) et ngx-bootstrap. J'essaye de créer un service modal qui servira de boîte de dialogue d'alerte sur n'importe quelle page. Le problème est que j'essaie de fermer le modal test et d'ouvrir le modal alert mais le alertModal ne s'ouvre pas je devine parce que this.bsModalRef.hide les cache tous les deux.

Qu'est-ce que je fais mal?

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(); 
} 

alerte-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> 

alerte-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

Je n'ai pas travaillé sur js angulaire ou utiliser "ngx-bootstrap" mais si ce que vous voulez réaliser est "fermer un modal et en ouvrir un autre" vous pouvez le faire dans bootstrap en ajoutant data-toggle et data-target aux boutons du premier modal pour ouvrir le prochain modal à la fermeture.

Supposons que vous avez un bouton modal:

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

qui cible cette modale:

<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> 

Deuxième Modal ici, avec l'identifiant exampleModal2 serait ouvert si le premier est fermé.

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

Voir violon here