试图关闭一个模式并打开另一个，但都保持关闭

我正在使用角度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

试图关闭一个模式并打开另一个，但都保持关闭

回答

相关问题