如何无需编写单独语言文件实现Angular网站全站多语言翻译

你可以借助 @ngx-translate/core 库实现，所有翻译内容直接内嵌在业务代码中，不需要创建独立的.json/.po类语言资源文件，具体配置步骤如下：

第一步：安装依赖 #

只需要安装核心翻译库即可，不需要额外的资源加载器：

npm install @ngx-translate/core --save

第二步：在根模块中内嵌翻译配置 #

直接在app.module.ts中完成所有翻译内容的注册，不需要额外创建语言文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    TranslateModule.forRoot() // 不需要配置外部加载器
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private translate: TranslateService) {
    // 设置默认 fallback 语言
    translate.setDefaultLang('zh');
    // 内嵌中文翻译字典
    translate.setTranslation('zh', {
      welcome: '欢迎访问站点',
      logout: '退出登录',
      dashboard: '数据面板',
      form: {
        submit: '提交表单',
        cancel: '取消'
      }
    });
    // 内嵌英文翻译字典
    translate.setTranslation('en', {
      welcome: 'Welcome to the site',
      logout: 'Logout',
      dashboard: 'Dashboard',
      form: {
        submit: 'Submit Form',
        cancel: 'Cancel'
      }
    });
    // 自动适配浏览器语言，也可以根据业务逻辑手动指定
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
  }
}

第三步：在项目中调用翻译 #

模板内使用管道调用 #

<h1>{{ 'welcome' | translate }}</h1>
<div class="form-group">
  <button>{{ 'form.submit' | translate }}</button>
  <button>{{ 'form.cancel' | translate }}</button>
</div>

组件内切换语言 #

import { TranslateService } from '@ngx-translate/core';

export class HeaderComponent {
  constructor(private translate: TranslateService) {}

  // 调用该方法即可切换全站语言
  changeLanguage(lang: 'zh' | 'en') {
    this.translate.use(lang);
  }
}

补充说明 #

如果你不想引入第三方依赖，也可以使用Angular原生i18n方案，编译时通过参数指定内嵌翻译配置即可，但整体配置复杂度远高于上述方案，更推荐中小型项目使用@ngx-translate的内嵌翻译方案。

• 翻译量较大时可以把翻译字典抽为单独的TS常量文件导出，本质仍然属于代码层内嵌，不需要走静态资源加载逻辑，也符合不使用单独语言资源文件的要求
• 该方案打包后翻译内容会直接打进主包，适合翻译体量不大的项目使用，如果翻译内容超过1000条还是更推荐使用外部语言文件按需加载的方案

内容的提问来源于stack exchange，提问作者sachin vishwakarma