从服务调用的模式未显示为模态，而是显示为页面内容（以角度显示）>> [

Question

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

错误模态组件定义了一个称为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方法，但不会正确显示模式，并且不会显示绑定文本。它显示在页面底部，并且已被禁用，您无法单击任何位置。

我不明白为什么从两个不同的地方调用同一个方法时会有这种区别。有提示吗？

这是单击按钮后的模式：

这是引发异常后的模态：

我正在构建一个全局错误处理程序，因此它将显示一个引导程序模式对话框，其中显示有关错误的详细信息。我有以下设置：错误模态组件定义了一个名为open（）的方法，其...

Answer 1

我遇到了完全相同的问题，但设置略有不同。我有一个带有“ handleError”函数的globalErrorHandler。显然，该函数在角度区域之外执行。