要在不刷新页面的情况下更改Angular 7 ngx-translate的运行时翻译,你可以使用下面的解决方法。
首先,确保你已经安装了ngx-translate,并在你的Angular项目中正确配置了它。你可以按照官方文档进行配置。
接下来,创建一个名为TranslationService
的新服务,用于处理翻译相关的逻辑。在该服务中,使用ngx-translate的getTranslation()
方法获取所有可用的翻译,并将其存储在translations
变量中。
// translation.service.ts
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Injectable({
providedIn: 'root'
})
export class TranslationService {
private translations: any;
constructor(private translateService: TranslateService) { }
init() {
this.translateService.getTranslation(this.translateService.currentLang).subscribe(
(translations: any) => {
this.translations = translations;
}
);
}
getTranslation(key: string) {
if (!this.translations) {
return key;
}
return this.translations[key] || key;
}
changeLanguage(lang: string) {
this.translateService.use(lang);
this.init();
}
}
然后,在你的根组件中,使用TranslationService
的init()
方法来初始化翻译服务。
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { TranslationService } from './translation.service';
@Component({
selector: 'app-root',
template: `
{{ 'WELCOME' | translate }}
`
})
export class AppComponent implements OnInit {
constructor(private translationService: TranslationService) { }
ngOnInit() {
this.translationService.init();
}
changeLanguage(lang: string) {
this.translationService.changeLanguage(lang);
}
}
最后,在你的模板中,你可以使用ngx-translate的translate
管道来翻译文本。在这个例子中,我们翻译了一个叫做WELCOME
的文本。
{{ 'WELCOME' | translate }}
现在,当你点击不同的语言按钮时,Angular应用程序将会更改运行时翻译,而无需刷新页面。