Angular Modal nicht immer richtig

Question

zeigt wir eine benutzerdefinierte implementiert Fehlerbehandlung in unserer Angular 4 App, die die Standard-Fehlerbehandler überschreibt und zeigt einen modalen mit dem Fehler:

@Injectable() 
export class GlobalErrorCatcherService implements ErrorHandler { 
    constructor(private errorDispatcherService: ErrorDispatcherService) { } 

    public handleError(error: Error) { 
    this.errorDispatcherService.dispatchError(error); 
    } 
} 

einige Schritte Skipping, dann haben wir ein ErrorDisplayService, die die Informationen über die Fehler bekommt und zeigt eine NgbModal, die eine Komponente aus dem @ ng-Bootstrap-Framework ist:

@Injectable() 
export class ErrorDisplayService { 
    constructor(private modalService: NgbModal) { 
    } 

    public showError(errorInformation: ErrorInformation): void { 
    const options = <NgbModalOptions>{ 
     backdrop: 'static', 
     keyboard: true 
    }; 

    const modalRef = this.modalService.open(ErrorDisplayContentComponent, options); 
    const componentInstance = <ErrorDisplayContentComponent>modalRef.componentInstance; 
    componentInstance.initialize(errorInformation); 
    } 
} 

Leider ist dies nur die Hälfte der Zeit funktioniert: Das erwartete Ergebnis manchmal richtig ist, zum Beispiel:

Aber mehr als oft nicht, was wir bekommen ist so etwas wie die:

All meine Bastelei bisher nicht funktioniert haben und ich konnte das Problem nicht zu. Gibt es weitere Möglichkeiten in der Umgebung? Ich könnte versuchen, das zu schaffen?

Answer 1

Ich beschloss, Fehlerbehandlung ähnlich zu implementieren und mit dem gleichen Problem konfrontiert. Mit Debugger habe ich herausgefunden, dass die Funktion handleError() von angular außerhalb von Zone aufgerufen wird, also nahm ich an, dies könnte eine Ursache sein, dass NgbModalWindow nicht richtig gerendert wird.

Meine Lösung war Modal innerhalb Winkel zone zu öffnen. Und das hat geholfen.

starten:

1. Inject in Ihre ErrorHandler Umsetzung NgZone. (private zone: NgZone in Konstruktor) oder mit injector.
2. Wickeln Sie Ihre this.errorDispatcherService.dispatchError(error); in zone.run(() => this.errorDispatcherService.dispatchError(error));