要确保所有路由都以 :gymId
参数为前缀,可以使用 Angular 7 的路由配置和路由守卫来实现。以下是一种解决方法:
:gymId
参数的前缀:export const GYM_ID_PREFIX = 'gymId';
GYM_ID_PREFIX
常量作为路由路径的前缀。例如:import { GYM_ID_PREFIX } from './constants';
const routes: Routes = [
{ path: `${GYM_ID_PREFIX}/:gymId/dashboard`, component: DashboardComponent },
{ path: `${GYM_ID_PREFIX}/:gymId/users`, component: UsersComponent },
// 其他路由配置
];
这样,所有以 :gymId
参数为前缀的路由都会匹配对应的组件。
:gymId
参数为前缀。如果不是,则重定向到以 :gymId
参数为前缀的路由。import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { GYM_ID_PREFIX } from './constants';
@Injectable({
providedIn: 'root'
})
export class GymIdGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const url: string = state.url;
const segments: string[] = url.split('/');
// 检查路由是否以 `:gymId` 参数为前缀
if (segments.includes(GYM_ID_PREFIX)) {
return true;
}
// 如果不是以 `:gymId` 参数为前缀,则重定向到以 `:gymId` 参数为前缀的路由
this.router.navigate([`${GYM_ID_PREFIX}/${segments[1]}/${segments.slice(2).join('/')}`]);
return false;
}
}
GymIdGuard
路由守卫来保护需要以 :gymId
参数为前缀的路由:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GymIdGuard } from './gym-id.guard';
const routes: Routes = [
{ path: `${GYM_ID_PREFIX}/:gymId/dashboard`, component: DashboardComponent, canActivate: [GymIdGuard] },
{ path: `${GYM_ID_PREFIX}/:gymId/users`, component: UsersComponent, canActivate: [GymIdGuard] },
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GymRoutingModule { }
这样,只有当路由以 :gymId
参数为前缀时,才能访问对应的组件。如果路由不是以 :gymId
参数为前缀,则会重定向到以 :gymId
参数为前缀的路由。
上一篇:Angular 7 路由