угловой роутер

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

Так что, как я вижу, вы не достигнете этого только с помощью конфигурации маршрутизатора, у него нет таких возможностей.Вместо этого вы можете использовать RouteGuard , чтобы проверить, находится ли параметр language в ['nl', 'en', 'de', 'fr'], а если нет, вы можете просто вернуть UrlTree (в случае углового 7.1+)из страница не найдена или перенаправить пользователя вручную с маршрутизатор (угловой <= 7,1). </p>

Защита может выглядеть следующим образом:

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)
        })
    );
  }
}

После этого вам просто нужно применить эту охрану к вашему родительскому маршруту.Надеюсь, это поможет.

Answer 2

Я думаю, что есть лучшие способы решить вашу проблему;если действительно ваша проблема связана с поддержкой разных языков в вашем приложении.

ngx-translate - это поддерживаемая, хорошо известная / документированная библиотека, которая позволяет интернационализировать ваше приложение без особых хлопот.

Библиотека позволяет предоставлять языки, которые поддерживает ваше приложение, где вы будете предоставлять файлы JSON, содержащие нужные языковые переводы, для каждого поддерживаемого вами языка.

Они будут выглядеть такthis:

{
    "title": "My title"
}

Библиотека предоставляет каналы, директивы, которые можно использовать в HTML следующим образом:

<span translate>title</span>

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

Оба будут отображать My Title - внутри элемента span.

Библиотека позволяет вам делать гораздо больше, например, интерполировать параметры, где вы можете передавать динамические значения в ваши переводы.Он также предоставляет вам услуги по переводу в вашем коде.