为什么数组的 Observable 和订阅者不起作用？

Question

我正在尝试编写一个简单的错误处理服务。它可以接收错误并将它们添加到数组中，但由于某种原因，它不起作用。

errorhandling.service

@Injectable()
export class ErrorHandlingService {
    private errors: Array<ErrorMessage>;

    constructor() {
        this.errors = new Array<ErrorMessage>();
    }

    getErrors(): Observable<Array<ErrorMessage>>{
        return Observable.of(this.errors);
    }

    handleError(error: Response, errorText: string) {
        let errorMessage = this.createErrorMessage(error);
        errorMessage.displayText = errorText;
        this.errors.push(errorMessage);
    }

    private createErrorMessage(error: Response): ErrorMessage {
        let errorMessage: ErrorMessage = new ErrorMessage();
        errorMessage.errorType = error.type;
        errorMessage.statusCode = error.status;
        return errorMessage;
    }
}

export class ErrorMessage {
    statusCode: number;
    displayText: string;
    errorType: ResponseType;
}

app.component.ts

export class AppComponent implements OnInit{
    errorMessage: Message[] = [];
    constructor(private authService: AuthService, private renderer: Renderer, private errorhandlingService: ErrorHandlingService) {
        localStorage.removeItem(AppConstants.authenticationLocalStorageKey);
    }

    ngOnInit(): void {
        this.errorhandlingService.getErrors().subscribe(errorMessages =>{
            let errorMessage: ErrorMessage = errorMessages.pop();
            console.log(errorMessage);
            this.errorMessage = errorMessage ? [{ severity: 'error', summary: '', detail: errorMessage.displayText }] : [];
        });
    }

    onDeactivate() {
        //scroll to top of page after routing
        this.renderer.setElementProperty(document.body, "scrollTop", 0);
    }
}

app.component.html

<div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10 well center-text">
            <p-messages [value]="errorMessage"></p-messages>
            <router-outlet (deactivate)="onDeactivate()"></router-outlet>
        </div>
        <div class="col-md-1"></div>
    </div>

下面的代码在另一个触发错误处理服务方法的组件中。

businessArea.component.ts

this.businessAreaService.getBusinessAreaById(id)
                    .subscribe(businessArea => {
                        this.model = businessArea;
                    },
                    error => this.errorHandlingService.handleError(error, 'Could not load Business Area'));

编辑：我尝试了很多类似 Observable 的东西，但效果不佳。我不确定主题是什么以及如何使用它，但似乎 Observable 在我的场景中是有意义的。任何有用的链接也会有所帮助吗？我可以断点，我可以看到它命中了方法，然后它将错误推送到数组中，但永远不会调用 app.component 上的订阅。

预期行为： 当在错误情况下调用this.businessAreaService.getBusinessAreaById 时，它会调用errorHandlingService.handleError，后者通过调用方法this.errorHandlingService.handleError 将错误记录在errorHandlingService 的数组中。现在我在 app.component 中有一个订阅者，当错误添加到数组时应该调用它，以便我可以在 div 中显示错误。

什么不起作用： 在错误处理服务中将元素/错误添加到数组时，不会调用 app.component.ts 上的订阅者。不应该在数组触发订阅者中添加元素吗？只有在第一次调用 ngOnit 时才会调用它。在任何后续错误之后，不会调用订阅者。虽然我可以看到错误被推送到数组中。

Answer 1

您可以使用Subject 来实现它，如下所示更新您的服务类中的代码，您无需修改​​除服务类之外的任何其他内容

import { Subject } from 'rxjs';

@Injectable()
export class ErrorHandlingService {
    private errors: Array<ErrorMessage>;
    private broadcaster = new Subject<Array<ErrorMessage>>();

    constructor() {
        this.errors = new Array<ErrorMessage>();
    }

    getErrors(): Subject<Array<ErrorMessage>>{
        return this.broadcaster;
    }

    handleError(error: Response, errorText: string) {
        let errorMessage = this.createErrorMessage(error);
        errorMessage.displayText = errorText;
        this.errors.push(errorMessage);
        // letting all subscribers know of the new change
        this.broadcaster.next(this.errors);
    }

    private createErrorMessage(error: Response): ErrorMessage {
        let errorMessage: ErrorMessage = new ErrorMessage();
        errorMessage.errorType = error.type;
        errorMessage.statusCode = error.status;
        return errorMessage;
    }
}

export class ErrorMessage {
    statusCode: number;
    displayText: string;
    errorType: ResponseType;
}