Angular 路由可选参数验证

Question

我的应用程序中有路由，其中​​第一个参数不是专用的。这取决于我的应用程序有哪些语言

const routes: Routes = [
  {
    path: ':lang',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './modules/home/home.module#HomeModule',
      },
          {
        path: 'offers',
        loadChildren: './modules/offers/offers.module#OffersModule',
      },
      {
        path: 'blog',
        loadChildren: './modules/blog/blog.module#BlogModule',
      },
    ]
 }
]

我可以在这里进行验证，如果用户输入错误的网址，它将重定向到 404 页面吗？

例如，domain.com/en/blog是有效的网址，但domain.com/anotherurl不是。

我正在使用 Angular 7 版本

Answer 1

是的，这是可能的。你可以做的是使用解析器：

const routes: Routes = [
  {
    path: ':lang',
    component: MainComponent,
    resolve: {foo: LanguageResolverService}
    children: []

解析器看起来像这样：

@Injectable()
export class LanguageResolverService implements Resolve<null> {
    constructor(private router: Router) {}

    public resolve(route: ActivatedRouteSnapshot, router) {

        const language = route.paramMap.get('lang');

        if(allowedLanguages.includes(language)) {
            return null;
        } else {
            this.router.navigate(['404']);
        }           
    }
}

现在，如果您的语言存在，解析器将简单地继续到所需的路线。如果没有，您可以将用户重定向到您想要的任何页面。