Как реализовать мультиязычность сайта с приложением на Angular?

Question

[Максим]

Как лучше реализовать мультиязычность сайта с приложением на Angular?
На сайте есть форма которая получает результаты из сервера с параметром lang: ru/en/de и контент, который прилетает из WP Rest Api тоже с параметром lang и статические менюхи и т.д.

Или билдить несколько сайтов и раскладывать по подпапкам /en, /de и в корень ru...

Comments

[Ivan Stroykin]

Для мультиязычности интерфейса воспользуйтесь ответом NardM (ngx-translate). Для мультиязычности контента - хранение на разных языках в БД

[Максим]

Иван Стройкин, Спасибо.
На сколько я понял все переводы помещаются в json-файл, а как же быть с загрузкой контента из других источников или нужно будет задавать условие, что при выборе языка - заново отправлять запросы на сервер и получать ответ в том языке, который нужен?

Или просто - то, что пришло с сервера на русском, ставить pipe"| translate" и все переведется автоматически?

google translate скрипт, в принципе тоже переводит, но, к примеру, календарь из PimeNg не переводит вообще, т.к. дни, недели, месяца там задаются в

app.component.ts

ngOnInit() {
        this.en = {
            firstDayOfWeek: 0,
            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
            today: 'Today',
            clear: 'Clear'
        };
    }

[Ivan Stroykin]

На сколько я понял все переводы помещаются в json-файл

Как один из вариантов, но самый популярный

а как же быть с загрузкой контента из других источников или нужно будет задавать условие

Как простой вариант - перезагружать приложение. Можно выбранную locale хранить в куках, чтобы доступ был и на фронте и на бэке. Либо делать запросы, к примеру так: "/api/ru/get_test", где вместо ru может быть любая локаль

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

Answer 1

[Ленар Мутигуллин]

Для этого есть библиотека translate, вот один из них

Comments

[Максим]

Спасибо.
На сколько я понял все переводы помещаются в json-файл, а как же быть с загрузкой контента из других источников или нужно будет задавать условие, что при выборе языка - заново отправлять запросы на сервер и получать ответ в том языке, который нужен?

Или просто - то, что пришло с сервера на русском, ставить pipe"| translate" и все переведется автоматически?

google translate скрипт, в принципе тоже переводит, но, к примеру, календарь из PimeNg не переводит вообще, т.к. дни, недели, месяца там задаются в

app.component.ts

ngOnInit() {
        this.en = {
            firstDayOfWeek: 0,
            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
            today: 'Today',
            clear: 'Clear'
        };
    }

[Ленар Мутигуллин]

Создаешь service, далее там создаешь переменную lang(ru, en etc), в компонентах, где подгружаются данные с сервера подписываешься на observable этого service, и в каждом из этих компонентах вызываешь повторно методы, но уже с измененным lang

[Максим]

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