角度路由 paramMap switchMap 在 404 后停止工作答案

【问题标题】：Angular route paramMap switchMap stops working after 404角度路由 paramMap switchMap 在 404 后停止工作
【发布时间】：2017-08-31 14:33:27
【问题描述】：

在我的组件的 ngOnInit 中，我使用 documentation 中建议的 paramMap 来重用组件，但根据路由中提供的用户 ID 进行切换：

    this.route.paramMap
        .switchMap((params: ParamMap) => {
            this.errors = false;
            this.busy = true;
            return this.userService.getUser(params.get('id'));
        })
        .subscribe((user) => {
            this.busy = false;
            this.errors = false;
            // do something with user object...
          }, (error) => {
            this.busy = false;
            this.errors = true;
            if (error.status === 404) {
                this.errorMsg = 'User not found';
            }
        });

但是，一旦 userService.getUser() 方法抛出 404 错误，当路由参数更改时，.switchMap() 就会停止触发，例如更改为新的用户 ID。我已经尝试将 .catch() 扔到服务和组件中，但它似乎没有任何效果，并且在 404 之后它仍然停止工作。我这样做是否不正确？

【问题讨论】：

标签： angular rxjs angular-routing

【解决方案1】：

我在使用 Angular Heroes 应用程序时遇到了同样的问题，问题通过导入 switchMap 运算符得到了解决。

import 'rxjs/add/operator/switchMap';

【讨论】：

【解决方案2】：

即使我订阅了activatedRoute observables，我也遇到了同样的问题，它们只触发一次，所以我必须这样做

router.events.subscribe(event:Event => {
    if(event instanceof NavigationEnd) {
   // your route code here
   this.route.paramMap
        .switchMap((params: ParamMap) => {
            this.errors = false;
            this.busy = true;
            return this.userService.getUser(params.get('id'));
        })
        .subscribe((user) => {
            this.busy = false;
            this.errors = false;
            // do something with user object...
          }, (error) => {
            this.busy = false;
            this.errors = true;
            if (error.status === 404) {
                this.errorMsg = 'User not found';
            }
        });
    }
    })

【讨论】：

不幸的是，这对我不起作用。我在 .switchMap 函数中有一个 console.log 语句，它根本不再触发。
您是否尝试过 NavigationStart 事件？并在 if 语句之前尝试控制台日志记录，您将了解路由器是否正在取消或有任何错误。希望这会有所帮助

【解决方案3】：

注意 - 几个月前我才开始使用 Angular。

但是，我认为以下将解决您的问题（我认为使用 switchmap 的全部目的是删除订阅）。

尝试以下方法：

user$: Observable<user>;

user$ = this.route.paramMap
        .switchMap(params => {
            this.errors = false;
            this.busy = true;
            return this.userService.getUser(params.get('id'));
        })
        .do(next => {
            this.busy = false;
            this.errors = false;
            // do something with user object...
          })
        .catch(error => {
            this.busy = false;
            this.errors = true;
            if (error.status === 404) {
                this.errorMsg = 'User not found';
            }
            return Observable.of(null);
        });

然后，在您的模板中，像这样使用异步管道：

( user$ | async ) as user

“作为用户”可能是可选的，具体取决于您的用例。

希望这会有所帮助。

【讨论】：