【Angular18】国际化翻译-引入translate

Aerfajj

于 2024-07-01 18:40:13 发布

阅读量169

点赞数 3

分类专栏： Angular18 文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43403486/article/details/140106814

版权

Angular18 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装插件

npm install @ngx-translate/core

修改配置文件app.config.ts
app.config.ts修改的内容

import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';


import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { routes } from './app.routes';


export function HttpLoaderFactory(http: HttpClient) {
  // 指定翻译文件路径
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}

// 安装插件TranslateLoader
export const provideTranslation = () => ({
  defaultLanguage: 'en',
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient],
  },
});

export const appConfig: ApplicationConfig = {
  // 插件注入
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    importProvidersFrom(FormsModule), 
    provideAnimationsAsync(), 
    provideHttpClient(), 
    importProvidersFrom([TranslateModule.forRoot(provideTranslation())])
  ]
};

使用的模块引入

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

// 引入module和service
import { TranslateModule, TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  standalone: true,
  // 注入
  imports: [RouterOutlet, TranslateModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  // 引入service
  constructor(private translate: TranslateService) {
    translate.addLangs(['en', 'zh']);
  }
  handleModelChange(index: number): void {
    console.log('hahah', index);
    if(index == 0){
      // 切换语言
      this.translate.use('en')
    }else{
      this.translate.use('zh')
    }
  }
}