Пишу универсальное приложение angular 11 с локализацией.
чего я пытаюсь добиться, так это иметь возможность загружать больше файлов scss в зависимости от выбранной локали.
так, например, если пользователь выбрал Hebrew, он добавит styles-he.scss, который добавил direction:rtl.
Я много гуглил, и в основном все говорят то же самое, что и этот URL: https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/
что мне нужно добавить новый стиль в мой angular.json, чтобы он загружался лениво:
"styles": [
"src/styles.scss",
{
"input": "src/styles-he.scss",
"bundleName": "hebrewStyle",
"inject": false
}
...
а затем я должен создать компонент loadStyle в app.component.ts:
loadStyle(styleName: string) {
const head = this.document.getElementsByTagName('head')[0];
let themeLink = this.document.getElementById(
'client-theme'
) as HTMLLinkElement;
if (themeLink) {
themeLink.href = styleName;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
}
}
и выполнять loadStyle('styles-he.scss') когда захочу
аааа... на самом деле в туториале говорилось о css, не знаю, сработает ли scss. вероятно, я должен использовать css в этом методе.
дело в том, что я ожидал, что будет более угловой способ включения этих файлов стилей на основе стран. не совсем понял, когда я выполняю эту функцию и как узнать, на каком она языке.
это моя конфигурация локали в angular.json
"i18n": {
"sourceLocale": "en",
"locales": {
"he": {
"translation": "src/locale/messages.he.xlf",
"baseHref": "he/"
}
}
},
так что в целом я не понимаю, как правильно добавить больше стилей в зависимости от выбранной локали.
