要在不刷新页面的情况下更改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应用程序将会更改运行时翻译,而无需刷新页面。