在router.navigate Angular 2之后处理停止传播时出错

时间:2017-02-15 07:40:56

标签: angular typescript

我在服务器端实现了错误处理以返回json。现在我正在处理Angular 2中的错误处理。

我的组件是:

onClick() {
        this.dataService.getData()
            .subscribe((response: Json) => {
                console.log("some text");
                if(response.status !== 'fail') {
                    ...
                }
            });
    }

我的 DataService.ts 是:

getData(): Observable<Json> {
        return this.http
            .get(this.getDataUrl)
            .map((response: Response) => {
                return this.responseService.extractJson(response);
            })
            .catch(error => {
                return this.errorService.handleError(error);
            });
    }

ResponseService.ts

extractJson(response: Response): any {
        let json: Json = response.json();
        if (json.status === 'success') {
            return json;
        } else {
            this.router.navigate(['something-went-wrong']);
            return null;
        }
    }

但是app继续在 subscribe 部分继续执行代码,因此我在浏览器控制台some text中看到了错误Cannot read property 'status' of null。如何在router.navigate之后停止进一步传播?我应该做什么或在router.navigate之后返回?

1 个答案:

答案 0 :(得分:2)

您在null中返回extractJson,因此您可以

onClick() {
    this.dataService.getData()
        .subscribe((response: Json) => {
            console.log("some text");
            if(!response) {
              // do nothing or whatever
              return
            }
            if(response.status !== 'fail') {
                ...
            }
        });
}

<强>更新
使用过滤器可防止null作为事件发生事件:

getData(): Observable<Json> {
    return this.http
        .get(this.getDataUrl)
        .map((response: Response) => {
            return this.responseService.extractJson(response);
        })
        .catch(error => {
            return this.errorService.handleError(error);
        }).filter(val => val != null);
}