Angular 多语言国际化配置

最新推荐文章于 2024-09-18 02:32:40 发布

遗忘了的自己

最新推荐文章于 2024-09-18 02:32:40 发布

阅读量271

点赞数

分类专栏： Angular 文章标签： angular 国际化

本文链接：https://blog.csdn.net/qq_24078843/article/details/115348861

版权

Angular 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

安装依赖

npm install @ngx-translate/core –-save
npm install @ngx-translate/http-loader --save

配置国际化

// app.module.ts

// 加载国际化资源文件
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json?nocache=' + (new Date()).getTime());
}
// 自定义翻译缺省处理方法
export class MyMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
      return 'XXX';
  }
}

// 引入多语言配置
imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      // （可选）配置翻译缺省处理方法，此时 useDefaultLang 需设置为 false, 不使用默认的语言环境
      missingTranslationHandler: {
        provide: MissingTranslationHandler,
        useClass: MyMissingTranslationHandler
      },
      useDefaultLang: false, // 设置默认语言是否可用
       
      defaultLanguage: 'zh-CN', // (可选) 设置默认语言 zh-CN 为 i18n 目录语言文件名

      // 多语言资源加载配置
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    })
  ],

多语言切换方法调用

// app.component.ts

export class AppComponent implements OnInit {

  lang = true;

  constructor(private translate: TranslateService) {
    // this.translate.setDefaultLang('zh-CN'); // 设置默认语言
    this.translate.use('zh-CN'); // 设置当前使用语言
    console.log(this.translate.getBrowserLang()); // 获取当前浏览器语言环境
  }
  ngOnInit(): void {
    // 订阅语言切换事件
    this.translate.onLangChange.subscribe((params) => {
      console.log(params);
    })
  }
  
  // 语言切换，使用 this.translate.use  方法切换语言
  changeLang(): void {
    if (this.lang) {
      this.translate.use('en-US'); // en-US 为多语言文件名
    } else {
      this.translate.use('zh-CN');
    }
    this.lang = !this.lang;
  } 


}