Angular router: перенаправление на URL-адрес i18n

Question

У меня есть угловое приложение, которое поддерживало только один язык (французский).Затем я разработал приложение для поддержки другого языка, в котором те же компоненты доступны по другому корневому маршруту /ar

Моя проблема сейчас заключается в том, что приложение использует много [routerLink] = "['some', 'thing '] и другие router.navigate (' ... '). Вместо i18n всех ссылок, я думаю об умном способе выполнить перевод URL.

Я сделал следующее:

this.translateService.onLangChange
.combineLatest(this.router.events)
.subscribe(([langEvent, event]) => {

    if (event instanceof NavigationStart) {
        let currentUrl = event.url;

        let locale = Locale.getLocaleByShortcut(langEvent.lang);

        if (locale) {
            if (locale.isArabic()) {
                if (!ContextUtils.isArabicUrl(currentUrl)) {
                    this.router.navigate(['/ar/' + currentUrl], {queryParams: this.route.snapshot.queryParams});
                }
            } else {
                if (ContextUtils.isArabicUrl(currentUrl)) {
                    let url = ContextUtils.frenchifyUrl(currentUrl);
                    this.router.navigate([url], {queryParams: this.route.snapshot.queryParams});
                }
            }
        }

    }

    if (event instanceof NavigationEnd) {

        if (Config.IS_WEB()) {
            $(document).ready(() =>
                setTimeout(() => {
                    Materialize.updateTextFields()
                }, 10)
            );
        }

        this.scrollToTop();
    }
});

Проблема в том, что это решение не работает идеально, особенно с queryParams, которые сохраняются при переходе от URL-адреса, имеющего queryParams, к другому, у которого их нет.

Есть ли какой-нибудь умный способдля префикса UrlSegment, к которому обращается маршрутизатор?

Пример <a[routerLink]="['some', 'thing']></a> ----> redirect to : /ar/some/thing, когда установлена ​​локаль AR. И к / some / thing, когда нет.

Спасибо.

Answer 1

Чего-то не хватает

Насколько я знаю, Angular не предлагает ничего, что объединяет локали в один веб-сайт.Angular требует, чтобы вы делали несколько сборок, каждая с указанным параметром локали.По сути, это разные веб-сайты, размещенные по разным адресам.

Существуют и другие решения для перевода с открытым исходным кодом, в которых используются каналы.Но я лично не хочу использовать стороннее решение для того, что влияет на каждую страницу вашего приложения.

У меня всегда было ощущение, что целевая страница будет эффективным улучшением.Это была бы страница, которая является index.html, которая связывает эти сайты вместе.например, у вас будет такая настройка:

index.html --> root landing page
en/
   index.html --> your angular site in English
   ...
fr/
   index.html --> your angular site in French.
   ...

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

Открытый исходный кодрешение

Я создал суть, которую вы можете найти здесь , которая делает именно это.Это настраиваемая целевая страница.Это намеренно написано просто обычный HTML и JS .Цель состоит в том, чтобы сделать этот корень index.html.

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

Базовая работа

Так что, если кто-то просто перейдет на http://example.com, он попытается определить язык этого пользователя несколькими способами (например, язык браузера, ...), и как только он узнает язык, он будет использовать предопределенную конфигурацию маршрутизации, чтобы перенаправить пользователя на правильный URL-адрес. И при пересылке запроса он также будет пересылать подпути.(немного подробнее об этом в последней части моего ответа).

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

Теперь, если вы хотите, чтобы ваш пользователь выбралязыком, то (например, на панели навигации вашей страницы или в панели настроек) вы можете добавить ссылку, например, http://example.com/?locale=en.Язык, указанный таким образом (т. Е. С использованием параметра запроса ), будет иметь более высокий приоритет, чем языки браузера или ранее сохраненные языки.

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

var defaultLocale = 'en';
var routing = {
  "en": 'https://example.com/en',
  "fr": 'https://example.com/fr'
  "en-uk": 'https://example.com/uk',
};

Скрипт предпочтет идеальный языковой хит.Но если это не приведет к совпадению, он попытается использовать только язык. (хотя всегда определяйте их строчными буквами).

Как обрабатываются подпути

Конкретно для вашего вопроса, как работает переадресация.

Неважнокакой веб-сервер вы используете, с angular веб-сервер всегда должен быть настроен так, чтобы все запросы подпутей также переадресовывались на ваш index.html.(Это должно уже иметь место в вашей текущей установке.)

Наш HTML-файл целевой страницы работает таким же образом, он также получает полный путь.Таким образом, когда он хочет извлечь подпути, он фактически имеет доступ к полному пути.И он извлечет подпуть, вырезав все, что находится за третьим /.

Итак, если вы разместите эту целевую страницу на http://example.com и у вас есть вышеуказанный конфигурационный маршрут.Затем, если кто-то перейдет на http://example.com/foo, и у этого пользователя будет английская локаль, он будет перенаправлен на http://example.com/en/foo.