Пытаюсь закрыть одно модальное окно и открыть другое, но оба продолжают закрываться

Я использую angular 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();
}

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>

alert-modal.ts

export class AlertModalComponent implements OnInit {

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

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