我正在使用 ngx-translate 在 Angular 7 中开发一个应用程序,用于国际化和基于引导的 AdminLTE 3。
我有两个CSS:
当我选择作为 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);
}
}
最佳答案
如果它是 rtl
,您可以在翻译文件中创建一个键作为当前主题的标志或 ltr
此值将更改您选择的语言的基础
样式.scss
.ltr {
@import 'themes/_en';
}
.rtl {
@import 'themes/_ar';
}
_ar.json{
"currentTheme":"rtl"
}
_en.json{
"currentTheme":"ltr"
}
应用程序模板<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
stackblitz demo 🚀
关于javascript - 在 Angular 7 中,如何从英语 (LTR) 加载阿拉伯语 (RTL) 的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59608231/