bootstrap-4 - 调用 modal('hide') 时引导对话框未关闭

Question

在代码中https://stackblitz.com/edit/angular-a9wcee

我Bootstrap在应用程序启动时显示一个对话框。但是单击关闭按钮时对话框不会关闭。我究竟做错了什么？

在index.html中，我创建了应用程序的根组件并传递了一个显示在对话框中的属性

<my-app signup="startup message">loading </my-app>

在app.component.ts，在ngAfterViewInit，我读取属性并显示对话框（调用后setTimeout我需要等待更改检测完成之前）

ngAfterViewChecked(){

    this.signup = this.el.nativeElement.getAttribute('signup');

    setTimeout(()=>this.isSignupProcess());
  }

app.component.html有一个对话框组件

  Hope to see dialog when the application starts!  

      <button>Am I clickable</button>
      <app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [context]=""></app-dialog-box>

对话框组件是一个Bootstrap模态的。

<div class="modal" #modal tabindex="-1" role="dialog" id="someID">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Example</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{dialogMessage}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="dialogHide()">Close</button>
      </div>
    </div>
  </div>
</div>

对话框组件还具有显示和隐藏模式的功能。

dialogShow(message:string,context:DialogContext){

   this.context = context;
    this.dialogMessage = message;
    //console.log("dialog show called ");
    $(this.dialogRef.nativeElement).modal('show');

  }

  dialogHide(){
   // console.log("dialog hide called");
    $(this.dialogRef.nativeElement).modal('hide');
  }
}

但dialogHide不隐藏模态。为什么？

标签： bootstrap-4angular6