試圖關閉一個模式並打開另一個，但都保持關閉

我正在使用角度4，bootstrap 4（測試版）和ngx-bootstrap。我正在嘗試創建一個模態服務，它將在任何頁面上用作警報對話框。問題是我正試圖關閉test模式並打開alert模式，但alertModal不打開我猜測，因爲this.bsModalRef.hide隱藏他們兩個。試圖關閉一個模式並打開另一個，但都保持關閉

我在做什麼錯？

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

來源

2017-10-19 derrickrozay

你能創造這個問題的再現plunkr？ Starter模板 - Plunkr：https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview StackBlitz：https://stackblitz.com/edit/ngx-bootstrap-stack?file=app%2Fapp.module.ts – IlyaSurmay

我沒有在角js上工作或使用「ngx-bootstrap」，但如果你想要實現的是「關閉一個模式並打開另一個」，你可以在bootstrap中通過將data-toggle和data-target添加到第一個模式在關閉時打開下一個模式。

假設你有一個模式按鈕：

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

哪些目標這個模式：

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

第二模式在這裏，id爲exampleModal2如果第一個被關閉將被打開。

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

見小提琴here

來源

2017-10-20 09:36:48 Laiman

試圖關閉一個模式並打開另一個，但都保持關閉

回答

相關問題