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

我正在使用angular 4、bootstrap 4（beta版）和ngx bootstrap。我正在尝试创建一个模式服务，它将作为任何页面上的警报对话框。问题是我试图关闭

测试

模式并打开

警报

模式，但是

警报模式

没有打开，我猜是因为

这个.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>

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

---

我没有在angular js上工作或使用“ngx引导”，但如果您想要实现的是“关闭一个模式并打开另一个模式”，您可以在引导中通过向第一个模式的按钮添加

数据切换

和

数据目标

，在关闭时打开下一个模式

假设您有一个模态按钮：

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

---

请参见fiddle

您能否创建一个复制此版本的plunkr？初学者模板-Plunkr:StackBlitz：你能通过一个模态的锚链接打开另一个模态吗？我不想通过关闭另一个模式来打开另一个模式。我想从第一个模式中选择一个链接以打开第二个模式，从而关闭第一个模式。@Krys是的，您可以这样将数据和数据目标属性添加到链接：

link

export class AlertModalComponent implements OnInit {

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

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

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

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