angular 路由器参数匹配正则表达式

Question

我想用一种匹配字符串数组或正则表达式的语言开始我所有的 url

const languages = ['nl', 'en', 'de', 'fr'] 或 const languageRegex = /(nl|en|de|fr)/g

我的routeConfig如下

const appRoutes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'en/configuration',
    },
    {
        children: [
            { path: '', pathMatch: 'full', redirectTo: 'configuration' },
            {
                loadChildren:
                    '../modules/booking-flow/configuration.module#ConfigurationModule',
                path: RouteHelper.paths.configuration,
            },
            {
                loadChildren:
                    '../modules/booking-flow/personal-info.module#PersonalInfoModule',
                path: RouteHelper.paths.personalInfo,
            },
            {
                loadChildren:
                    '../modules/booking-flow/summary.module#SummaryModule',
                path: RouteHelper.paths.summary,
            },
            {
                loadChildren:
                    '../modules/booking-flow/payment-method.module#PaymentMethodModule',
                path: RouteHelper.paths.paymentMethod,
            },
            {
                loadChildren:
                    '../modules/booking-flow/confirmation.module#ConfirmationModule',
                path: RouteHelper.paths.confirmation,
            },
            {
                component: ErrorPageComponent,
                path: RouteHelper.paths.errorNotFound,
            },
            {
                path: '**',
                pathMatch: 'full',
                redirectTo: RouteHelper.paths.errorNotFound,
            },
        ],
        component: null,
        path: ':language',
        runGuardsAndResolvers: 'always',
    },
];

遗憾的是这不起作用，在我看来这是一个非常可读的配置：

path: ':language(/nl|en|de|fr/g)',

我想要得到以下图案。

/ 重定向到 /en/configuration 作品
/nl 重定向到 /nl/configuration 作品
/es 重定向到 404 不起作用
/es/configuration 重定向到 404 无效
/en/invalid 重定向到 /en/404 作品

Answer 1

我认为有更好的方法可以解决您的问题；如果您的问题确实与您的应用程序中支持不同的语言有关。

ngx-translate 是一个受支持的、很好的 known/documented 库，它允许您将您的应用程序国际化，没有太多麻烦。

该库允许您提供您的应用程序支持的语言，您将在其中提供 JSON 文件，其中包含您所支持的每种语言所需的正确语言翻译。

它们看起来像这样：

{
    "title": "My title"
}

该库提供了管道、指令，可以像这样在HTML中使用：

<span translate>title</span>

<span> {{ 'title' | translate }}</span>

两者都会呈现 My Title - 在 span 元素内。

该库允许您做更多的事情，例如参数插值 - 您可以在其中将动态值传递给您的翻译。它还为您提供在代码内进行翻译的服务。

Answer 2

因此，正如我所见，仅通过路由器配置是无法实现的，它没有这样的功能。相反，您可以使用 RouteGuard 来检查 language 参数是否在 ['nl', 'en', 'de', 'fr'] 中，如果不在，您可以 return 一个 [=19] =]UrlTree（在 angular 7.1+ 的情况下） 未找到页面 或重定向用户手动使用 路由器 (angular <= 7.1).

守卫可以是这样的：

const allowedLanguages = ['nl', 'en', 'de', 'fr'];

@Injectable({
  providedIn: 'root'
})
export class LanguageGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.next.params.pipe(
        map(params => {
            return params && allowedLanguages.includes(params.language)
               ? true
               : this.router.parseUrl(RouteHelper.paths.errorNotFound)
        })
    );
  }
}

之后你只需要将这个守卫应用到你的父路由。希望对您有所帮助。

angular 路由器参数匹配正则表达式

angular router param match regex

angular

angular-router

守卫可以是这样的：