Question

我有路线配置

const appRoutes: Routes = [
  { path: '', loadChildren: 'app/+home/home.module#HomeModule' },
  { path: 'auth', loadChildren: 'app/+auth/auth.module#AuthModule' },
  { path: ':category', loadChildren: 'app/+search/search.module#SearchModule' },
  {
    path: '**',
    component: PageNotFoundComponent,
    data: { title: 'Page not found' }
  },
];

我需要检查:category路由参数值是否作为数据库中的搜索类别存在，如果是，则激活路由，否则转到404页面（在本例中为PageNotFoundComponent）。

使用CanActivate是最好的方法吗？如何导航到404页面？

Answer 1

是的，您可以使用CanActivate警卫。

{
  path: ':category',
  loadChildren: 'app/+search/search.module#SearchModule'
  canActivate: [CanActivateCategory]
},

然后，在守卫内重定向：

@Injectable()
class CanActivateCategory implements CanActivate {

  constructor(private router: Router,
              private categoryService: CategoryService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    const obs = this.categoryService.categoryExists(route.params['category']);
    obs.subscribe((exists: boolean) => {
      if (!exists) this.router.navigate('/404');
    });
    return obs;
  }
}

此代码假定您有一个CategoryService来验证类别是否存在，并且您已为路径/404声明了路由。

最后注意事项：如果您需要为当前:category预加载一些数据，我会将此代码放在Resolve中。这样，您就可以在一个地方完成所有操作：预加载数据，或者如果无法找到/预加载数据，则会重定向到/404。

如何解决Angular 2中的路由参数

1 个答案: