从服务调用的模态不会显示为模态，而是显示为角度的页面内容

我正在构建一个全局错误处理程序，因此它显示了一个引导模式对话框，显示有关错误的详细信息 . 我有以下设置：

错误模式组件定义了一个名为 open() 的方法，其模板包含一个调用 open() 的按钮（调试它），一切正常，模态正确显示带有绑定文本 .

ErrorModalComponent代码：

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { GlobalErrorHandler } from './global-error-handler.service';

@Component({
  selector: 'app-error-modal',
  templateUrl: './error-modal.component.html',
  styles: []
})
export class ErrorModalComponent {

  private _message: string;

  @ViewChild('content') _modalTemplate: TemplateRef<any>;

  constructor(private _modalService: NgbModal, private _globalErrorHandler: GlobalErrorHandler) {
    this._globalErrorHandler.errorEventSource$.subscribe(errorMessage => {
      this._message = errorMessage.toString();
      this.open();
    });
  }

  open() {
    this._modalService.open(this._modalTemplate);
    this._message = "A change test";
  }

  public get message(): string {
    return this._message;
  }
}

ErrorModalComponent html：

<button class="btn btn-info" (click)="open()">Show Modal</button>
<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">It's not you, it's me: unhandled error</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>We are sorry but something has slipped by and we have an uncontrolled error.</p>
      <p>A notification has been sent to us and we will process it soon.</p>
      <p>{{message}}</p>
    </div>
    <div class="modal-footer">
      <div class="col-4">
        <button type="button" class="btn btn-danger btn-block" (click)="c('Close click')" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</ng-template>

GlobalErrorHandler代码：

import { ErrorHandler,  Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  private errorEventSource = new Subject<string>();
  errorEventSource$ = this.errorEventSource.asObservable();

  handleError(error: any) {
    this.errorEventSource.next(error);
  }
 }

当我在代码中的某处放置异常时捕获事件，调用open方法但是模式没有正确显示，并且绑定文本没有出现 . 它出现在页面底部，并且已禁用，您无法在任何位置单击 .

当从两个不同的地方调用相同的方法时，我不明白为什么会有这种差异 . 任何提示？

这是单击按钮后的模态：

这是提出异常后的模式：