Angular 5.x 国际化解决方案 - ngx-translate的使用

最新推荐文章于 2025-04-09 14:15:04 发布

halli_

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量1.1w

点赞数 3

本文链接：https://blog.csdn.net/u012125121/article/details/79447614

版权

本文介绍了在Angular 5.x框架中，如何使用ngx-translate库实现国际化。内容包括ngx-translate的安装、核心模块与http-loader的使用，以及在HTML模板和TypeScript中的具体应用。详细讲解了get和instant两个主要方法，并指出instant方法在页面缓存场景下的限制及应对策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular 5.x 国际化解决方案 - ngx-translate的使用

下面示例代码都是基于ionic3.x UI框架中的组件编写的，直接进入正题

ngx-translate库的安装

先放上ngx-translate官网及其github地址，在项目中，我们主要用到@ngx-translate/core和 @ngx-translate/http-loader两个模块，core模块是该库的核心模块，http-loader则是一个通过http调用翻译文件的加载器模块。如图示：
这里写图片描述
安装模块包

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

注意本文在编写的时候使用的是Angular 5框架，如果您使用的是Angular 4框架，请使用@ngx-translate/core@7.2.2的兼容版本，请执行以下命令。如果您当前使用的更低版本的Angular 2框架，请参考这篇注解 -点击链接跳转。

npm install @ngx-translate/core@^7.2.2 --save

下图所示，是基于ionic3.9版本的配置信息，本文以此为准
这里写图片描述

ngx-translate库的使用

1.导入模块

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { IonicApp } from 'ionic-angular';

// 使用TranslateHttpLoader加载项目的本地语言json配置文件
function createTranslateLoader(http: HttpClient) {
   
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        // 调用forRoot静态方法指定加载的文件
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [ HttpClient ]
            }
        }),
    ],
    bootstrap: [IonicApp],
})
export class AppModule {
    }

2.初始化配置

// app.module.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { TranslateService } from

最低0.47元/天解锁文章