要在Angular应用中实现本地化,可以使用Angular l10n库。为了在单独的模块中加载翻译并且不触发translationChanged事件,可以按照以下步骤进行操作:
npm install @angular/localize
创建一个翻译文件,例如translations.json
,并将其放置在一个可以被应用程序访问到的位置。
在你的模块中,导入LocaleInitializer
和LOCALE_INITIALIZED
符号:
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { LocaleInitializer, LOCALE_INITIALIZED } from '@angular/localize';
@NgModule({
// ...
providers: [
{
provide: APP_INITIALIZER,
useFactory: (localeInitializer: LocaleInitializer) =>
() => localeInitializer.init().toPromise(),
deps: [LocaleInitializer],
multi: true
},
{
provide: LOCALE_INITIALIZED,
useValue: true
}
]
})
export class YourModule { }
TranslateService
加载翻译文件:import { TranslateService } from '@ngx-translate/core';
@NgModule({
// ...
})
export class YourModule {
constructor(private translateService: TranslateService) {
this.translateService.setTranslation('en', translations); // 用你的翻译文件替换'translations'
this.translateService.setDefaultLang('en');
this.translateService.use('en');
}
}
{{ 'HELLO' | translate }}
TranslateService
并注入到构造函数中:import { TranslateService } from '@ngx-translate/core';
export class YourComponent {
constructor(private translateService: TranslateService) { }
}
现在,你就可以在Angular应用中加载并使用翻译文件了。这样,当你的模块加载时,它将加载翻译文件,而不会触发translationChanged
事件。