角4：処理IDが見つかりません

Question

角では、カスタム404ページを表示するためにワイルドカードルーティングを使用する方法を理解しています。ただし、存在しないコンポーネントのケースのみをカバーします。

ユーザーが既存のコンポーネントにアクセスしたが、存在しないIDを渡したケースはどうですか？

たとえば、/widgets/1234512345はデータベースに存在しません。 この場合、404を表示するベストプラクティスは何ですか？

エラーをキャッチしてユーザーを404ページにリダイレクトすることができました。しかし、それは正しくないと思われます。あなたは通常404のリダイレクトにはなりませんが、代わりに同じURLにとどまりますが、代わりに404ページが必要です。

Answer 1

角度で404状態エラーを送信することができた場合、このような状況を処理する方が簡単です。 しかし、角では、コンポーネントをブラウズ中に実際にHTTPリクエストをしていないので、404ステータスエラーが返されることはありません。

これを回避するには、Angular resolve~Router Guardsを使用して、ルートデータIDが存在するかどうかを調べることができます。存在しない場合は404ページにリダイレクトしてください。

@Injectable() 
export class checkIdExistence implements CanActivate { 

    constructor(private router: Router, 
       private route: ActivatedRoute, 
       private yourService: YourService) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot) 
    { 
     return this.route.params 
      .mergeMap(
      (params: Params) => { 
       const newId = params['id'] ? +params['id'] : ''; 
       return this.yourService.checkExistence(newId) 
        .map((myInstance: any) => { 
         if (myInstance && myInstance.id) { 
         return true; 
         } 
         this.router.navigate(['/404-url']); 
         return false; 
        }) 
        .catch(() => Observable.of(false)); 
     }); 

    } 
}