如何在Angular 2中解析路径参数

debugcn 发表于 Dev

拉哈特

我有路线配置

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页面如何？

天使厨师

是的，您可以使用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来验证类别的存在，并且已声明path的路由/404。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。