アンギュラルートparamMap switchMapは私のコンポーネントのngOnInitで404

Question

後に動作を停止しdocumentationで提案されているように、私はルートに提供されるユーザーIDに基づいて、再使用部品が、スイッチにparamMapを使用しています：

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の後にはまだ動作しなくなります。これについては間違っていますか？

Answer 1

私は私がこの

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'; 
 
      } 
 
     }); 
 
    } 
 
    })

Answer 2

注意をしなければならないので、彼らは一度だけトリガーactivatedRouteの観測に加入していていても同じ問題を抱えていた - 私はちょうど角度Aで作業を開始しました数ヶ月後。

しかし、私はあなたの問題を解決すると思います（私は、スイッチマップを使用することのポイントはサブスクリプションを削除することだと思います）。

次のことを試してみてください。

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 

かもしれあなたのユースケースに応じてオプションです。

これが役に立ちます。

Answer 3

Angular Heroesアプリで同じ問題が発生しましたが、問題はswitchMap演算子をインポートして解決しました。

import 'rxjs/add/operator/switchMap';