英文:
In Angular 7 how to load CSS of Arabic language (RTL) from English language (LTR)
问题
我正在使用Angular 7开发一个应用程序，使用ngx-translate进行国际化，并基于Bootstrap的AdminLTE 3进行开发。
我有两个CSS文件：
- 一个用于从左到右（LTR）的语言。
- 另一个用于从右到左（RTL）的语言。
当我选择阿拉伯语（RTL方向）时，如何加载bootstrap_rtl.css并卸载bootstrap_ltr.css。
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" (click)="useLanguage('en')">
English
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="useLanguage('ar')">
Arabic
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="useLanguage('ta')">
Russian
</a>
</div>
export class NavbarComponent implements OnInit {
constructor(private translate: TranslateService) { }
ngOnInit() {
}
useLanguage(language: string) {
this.translate.use(language);
}
}
英文:
I am developing an application in Angular 7 using ngx-translate for internationalization and bootstrap based AdminLTE 3.
I have two css:
- One for LTR based languages
- another for RTL based languages.
When I select Arabic language which is a RTL direction, how to load the bootstrap_rtl.css and unload the bootstrap_ltr.css.
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" (click)="useLanguage('en')">
English
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="useLanguage('ar')">
Arabic
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="useLanguage('ta')">
Russian
</a>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
export class NavbarComponent implements OnInit {
constructor(private translate: TranslateService) { }
ngOnInit() {
}
useLanguage(language: string) {
this.translate.use(language);
}
}
<!-- end snippet -->
答案1
得分: 7
以下是已翻译的内容：
你可以在翻译文件中创建一个键，作为当前主题的标志，如果它是 rtl 或 ltr，这个值将根据你选择的语言而改变。
style.scss
.ltr {
@import 'themes/_en';
}
.rtl {
@import 'themes/_ar';
}
_ar.json
{
"currentTheme":"rtl"
}
_en.json
{
"currentTheme":"ltr"
}
app.template
<div [ngClass]="'currentTheme' | translate"> // 👈
{{'currentTheme' | translate}}
<p class="base-align">
<hello name="{{ name }}"></hello>
Start editing to see some magic happen :)
</p>
theme <button (click)="useLanguage('en')">English</button>
<button (click)="useLanguage('ar')">Arabic</button>
</div>
当语言改变时，currentTheme 的值将改变，样式也会改变。
英文:
you can create a key in the translation file as flage of the current theme if it's rtl or ltr and this value will change base of the language that you have select
style.scss
.ltr {
@import 'themes/_en';
}
.rtl {
@import 'themes/_ar';
}
_ar.json
{
"currentTheme":"rtl"
}
_en.json
{
"currentTheme":"ltr"
}
app.template
<div [ngClass]="'currentTheme' | translate"> // 👈
{{'currentTheme' | translate}}
<p class="base-align">
<hello name="{{ name }}"></hello>
Start editing to see some magic happen :)
</p>
theme <button (click)="useLanguage('en')">English</button>
<button (click)="useLanguage('ar')">Arabic</button>
</div>
> when the languae change the value of currentTheme will chnage and the style will change
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论