Angular 5 Custom-Error-Handler：显示错误消息答案

【问题标题】：Angular 5 Custom-Error-Handler: Display Error-messageAngular 5 Custom-Error-Handler：显示错误消息
【发布时间】：2018-07-07 23:43:58
【问题描述】：

我正在尝试为 Angular 5 创建一个错误处理程序。如果通过我的 CustomErrorHandler 触发错误，则应该更新前端。问题是变量更新后没有任何变化。

error-handler.service.ts

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
    message: String = "";
    isVisible: boolean = false;

    visibilityChange: Subject<boolean> = new Subject<boolean>();

    constructor() {
        this.visibilityChange.subscribe((value) => {
            this.isVisible = value
        });
    }

    handleError(error) {
        console.error(error);
        this.message = "ERROR: " + error.toString();
        this.visibilityChange.next(true);
    }
}

错误消息.component.ts

import {Component} from '@angular/core';
import {CustomErrorHandler} from "../../../services/error-handler.service";

@Component({
    selector: 'app-error-message',
    templateUrl: './error-message.html',
})

export class ErrorMessageComponent {
    public message: String = "";
    public isVisible: boolean = false;

    constructor(private customErrorHandler: CustomErrorHandler) {
        this.isVisible = customErrorHandler.isVisible;
    }
}

错误处理程序.html

<div class="alert alert-danger" id="app-error" *ngIf="isVisible">
    {{message}}
</div>

app.html

<app-nav></app-nav>
<div class="container">
    <div class="jumbotron">
        <app-error-message></app-error-message>
        <app-info-message></app-info-message>
        <router-outlet></router-outlet>
    </div>
</div>
<app-footer></app-footer>

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        ErrorMessageComponent,
        .....
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        AngularFontAwesomeModule,
        routing
    ],
    providers: [
        UserService,
        {
            provide: ErrorHandler,
            useClass: CustomErrorHandler
        },
        CustomErrorHandler
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

有人知道我做错了什么吗？

【问题讨论】：

自定义ErrorHandler实现应该在模块中提供，它将被使用而不是默认的。您可以拥有一个服务来管理消息和一个注入服务以显示消息的组件。您的自定义错误处理程序可以在出现错误时更新服务。你能解释一下你希望你的设置如何工作吗？
另外，您是否正在寻找处理 http 错误或抛出的各种错误？
这个实现的想法是，在前端显示错误的简短描述，并在日志文件中详细记录所有内容。它应该特别显示 HTTP 错误，但也应该能够显示各种错误。没错，CustomErrorHandler 应该是一个服务。
创建ErrorLogger 服务并将其注入CustomErrorHandler。然后CustomErrorHandler 将拦截错误并将其发送给ErrorLogger，您的log 逻辑可以在ErrorLogger 服务中完成。拦截后也会从自定义错误处理程序中抛出错误。
对于http相关的错误，angular支持HttpInterceptor，可以用类似的方式记录http调用。

标签： javascript html angular error-handling angular5

【解决方案1】：

对于 rxjs 订阅，您可能必须使用 changedetection。

    constructor(private changeDetection: ChangeDetectorRef) {
    this.visibilityChange.subscribe((value) => {
        this.isVisible = value; this.changeDetection.detectChanges();
    });
}

【讨论】：

为什么需要这样做？你能详细说明你的答案吗