Question

我正在使用角度4，bootstrap 4（beta）和ngx-bootstrap。我正在尝试创建一个模态服务，它将作为任何页面上的警报对话框。问题是我试图关闭hue,1,876543,wow,hai heu,2,345678,waw,hey uhe,3,998899,iwi,hel euh,4,880011,qaq,hal模态并打开test模态，但alert没有打开，我猜是因为alertModal隐藏了它们。

我做错了什么？

的test.html

this.bsModalRef.hide

test.component.ts

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

警报-modal.html

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

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

Answer 1

我没有使用角度js或使用“ngx-bootstrap”但是如果你想要实现的是“关闭一个模态并打开另一个模式”，你可以通过添加data-toggle和{{1来在引导程序中执行此操作在第一个模态的按钮上打开关闭时的下一个模态。

假设你有一个模态按钮：

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">  <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="modal" data-target="#exampleModal2"> <span aria-hidden="true">×</span> </button> </div> </div>。

exampleModal2

请参阅小提琴here

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

1 个答案: