Angular 4 : Handling ID Not Found

Question

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

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

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

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

Answer 1

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

要解决此问题，您可以使用 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));
         });

    }
 }