Question

我试图通过显示带有错误消息的简单对话框来在Angular 4中创建一个简单的错误处理。但是，该对话框仅显示何时第二次将错误设置到变量中。这是我的错误服务（error.service.ts）：

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

@Injectable()
export class ErrorService {
    private errorMessage = new Subject<any>();

    constructor() {

    }

    showError(error: any) {
        this.errorMessage.next({ text: error.message });
    }

    getError(): Observable<any> {
        return this.errorMessage.asObservable();
    }

    clearError() {
        this.errorMessage.next();
    }
}

这是我的对话框组件（error.component.ts）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ErrorService } from '../../services/error.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    moduleId: module.id,
    selector: 'error',
    templateUrl: './error.component.html'
})
export class ErrorComponent implements OnInit {
    error: any;
    subscription: Subscription;

    constructor(private errorService: ErrorService) {

    }

    ngOnInit(): void {
        this.subscription = this.errorService.getError().subscribe((error: any) => { this.showError(error); });
    }

    showError = (error: any) : void => {
        this.error = error;
    }

    clearError() {
        this.errorService.clearError();
    }

    buttonclick() {
        this.showError({text: 'this works!'});
    }

    ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }
}

对话框视图（error.component.html）：

<div class="alert alert-danger fade show" role="alert" *ngIf="error">
    <button type="button" class="close" (click)="clearError()">
        <span aria-hidden="true">&times;</span>
    </button>
    {{error.text}}
</div>
<button (click)="buttonclick()">testbutton</button>

现在，如果我在error.component.html中使用testbutton，一切都很好。但是，当我调用error.service函数showError（实际用例）时，error.component的错误变量正确更新，但视图没有。当我再次使用showError时，它现在显示上一条错误消息。如何正确更新视图？

更新

从globalerror.handler.ts调用ErrorService，它覆盖了ErrorHandler。代码：

import { ErrorHandler, Injectable } from '@angular/core';
import { ErrorService } from '../../services/error.service';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
    constructor(private errorService: ErrorService) {

    }

    handleError(error: any) {
        this.errorService.showError(error);
    }
}

我通过抛出错误来测试它（抛出错误（＆＃34; ERROR＆＃34;）;），直到我抛出另一个错误才会在视图中显示。 ButtonClick（）只是一个测试，它可以正常工作。

Angular 4视图直到第二次更改才更新

0 个答案: