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

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.

声明了一个路由

最后说明：如果您需要 pre-load 当前 :category 的一些数据，我会将此代码放在 Resolve 中。这样，您可以在一个地方完成所有操作：pre-load 数据，或者如果数据不能 found/preloaded，则重定向到 /404.

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

How to resolve route param in Angular 2

angular

angular2-router