Как обрабатывать ошибки при использовании нескольких компонентов

Question

У меня есть компонент, который выходит и делает http-запрос для получения некоторых данных. Ответ может содержать ошибки из запроса, которые я хочу отобразить в своем приложении с использованием отдельного компонента ошибок / службы / представления.

Мои компоненты размещены в моем app.component.html виде:

<div>
    <app-error *ngIf="// check if endpoint returned errors, if yes, show"></app-error>
    <app-endpoint></app-endpoint>
</div>

Я не уверен, как получить данные из компонента конечной точки (куда ошибки войдут в мое приложение) в компонент ошибки и просмотреть.

Для примера, это логично, что я хотел бы, чтобы EndpointComponent пытался получить данные:

endpoint.component.ts

export class EndpointComponent 
{
    constructor(private errorService: ErrorService){ }

    getData(){
        this.endpointService.get().subscribe(
            response => checkError(response) // check and push to my error component if it exists)
...

error.service.ts

export class ErrorService 
{
    public pushErrors(error: string) {

        // In here would be the code to push this error
        // to error.component.ts / error.component.html
    }
...

error.component.html

<div class="alert alert-danger">
    <ul *ngFor="let error of errors">
        <li>{{error}}</li>
    </ul>
</div>

Я не уверен, как заполнить мой обзор ошибок ошибкой, отправленной обратно в мой компонент конечной точки. Поскольку это представление заполняется только в том случае, если в ответе других компонентов присутствуют ошибки, я не уверен, как мы скажем нашему приложению заполнять элементы данными об ошибках.

Answer 1

Наблюдаемая закономерность в другом ответе является, пожалуй, лучшим и более угловатым тематическим способом сделать это.

Но совершенно нормально просто делить объект ошибок между службой и компонентом (здесь служба работает как глобальная оболочка, но это также допустимо в соответствии с командой angular).

error.service.ts

export class ErrorService 
{
    public errorList;
    public pushErrors(errors: string[]) {

        //I refactored this for plural 
        this.errorList.push(...errors);
    }
    public clearErrors(){
       this.errorList.splice(0,this.errorList.length) // we remove like this so that there is no reassignment
    }

error.component.ts

public error;
constructor(private errorService: ErrorService){
    this.errors = errorService.errorList
}

Всякий раз, когда какой-либо компонент помещает что-то в ErrorService, ErrorComponent будет уведомлен об изменении, потому что изменяемая им переменная изменилась

Answer 2

Я думаю, что вы хотите подписаться на службу ошибок error в вашем компоненте ошибок.

Я бы предпочел сделать это, используя BehaviorSubject.

Например, в сервисе Error определите ошибку как поведенческий субъект и подпишитесь на нее в ErrorComponent. Как только новая Ошибка будет нажата, вы получите ошибку в компоненте.

private errorObj = null;
    public errorList: BehaviorSubject<any> = new BehaviorSubject<any>(this.errorObj);

    pushError(value: any) {
        this.errorList.next(value);
    }`

Теперь в компоненте подпишитесь на errorBanner. Пример: this.errorService.errorBanner.subscribe( err => {this.showError = true;})

Теперь в компоненте ошибки HTML. Используйте showError для отображения ошибок, полученных с errorService.

Обратите внимание, что в этом случае ErrorComponent всегда будет отображать самую последнюю ошибку, замеченную в приложении.