Angular 4：未找到处理 ID

Question

在 Angular 中，我了解如何使用通配符路由来显示自定义 404 页面。但是，这仅涵盖不存在组件的情况。

用户到达现有组件但传递了不存在的 ID 的情况如何？

例如/widgets/12345其中12345不存在于数据库中。在这种情况下显示 404 的最佳做法是什么？

我设法通过捕获错误将用户重定向到 404 页面。但这似乎不对：您通常不会被重定向到 404，您希望停留在相同的 URL 上，而是使用 404 页面。

Answer 1

如果在 Angular 中可以发送 404 状态错误，那么处理这种情况会更容易。但是，在 Angular 中，没有必要返回 404 状态错误，因为在 Angular 中，您在浏览组件时实际上并没有发出任何 http 请求。

为了解决这个问题，您可以使用Angular 解析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));
         });

    }
 }