我正在开发一个 Angular 17 应用程序,我在其中实现了 i18n 以实现国际化。最初,我将阿拉伯语设置为整个应用程序的默认语言。现在,我需要根据某些条件将特定组件切换为英语。有人可以指导我如何实现这一目标吗? 谢谢你
public sidebarShow: boolean = false;
setLang = 1; // Assuming setLang is set based on some condition
constructor(@Inject(LOCALE_ID) public locale: string,
private cdr: ChangeDetectorRef) {
}
ngOnInit(): void {
this.setLocale();
}
setLocale(): void {
if (this.setLang === 1)
{
// Set English locale
this.locale = 'en-US';
console.log(this.locale)
} else {
// Set Arabic locale
this.locale = 'ar-SA';
console.log(this.locale);
}
this.cdr.detectChanges(); // Trigger change detection
}
<div >
<div class="bg-primary" >
<h1 i18n>Features sections</h1>
<p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
<p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
<p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
</div>
</div>
<div>
<h1 i18n>Blogs sections</h1>
<p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
<p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
<p i18n>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora excepturi, ducimus repudiandae aspernatur molestias accusantium debitis iusto praesentium voluptate error mollitia pariatur fugit qui ut deserunt quod rem magnam hic!</p>
</div>
Angular i18n 无法为应用程序的子集切换语言,因为翻译已提前编译到分发包中。
可以使用 Angular i18n 在运行时加载翻译,但这仍然需要硬重新加载,即使这样,你也无法为特定组件设置另一种语言。
要实现此行为,请使用例如 transloco。