可能是因为在刷新页面时Angular使用默认语言而不是用户选择的语言。为了解决这个问题,可以使用Angular的更改检测机制,并在初始加载时加载用户已选择的语言。
示例代码:
import { TranslateService } from '@ngx-translate/core';
export class AppComponent {
constructor(private translate: TranslateService) { // 设置支持的语言 translate.addLangs(['en', 'es', 'fr']); // 设置默认语言 translate.setDefaultLang('en'); // 获取浏览器当前语言设置 const browserLang = translate.getBrowserLang(); // 接受用户选项或浏览器默认语言 translate.use(browserLang.match(/en|es|fr/) ? browserLang : 'en'); } }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@NgModule({ imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] } }) ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }
{{ 'HOME.CONTENT' | translate }}
{ "HOME": { "TITLE": "Angular 多语言本地化示例", "CONTENT": "选择您喜欢的语言:" }, "LANGUAGES": { "EN": "英语", "ES": "西班牙语", "FR": "法语" } }
这样,在用户选择语言后刷新页面时,页面将记录并保留所选语言。
上一篇:Angular: “Object”类型只能赋值给少数其他类型
下一篇:angular:6 typescript:2 primeng:7的原因是“cli Initializers are not allowed in ambient contexts”。