javascript - 为什么数组的 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 方法将错误记录在 errorHandlingService 的数组中.handleError。现在我在 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;
}