[Angular] Import TranslateModule in Angular 16

1.Background

Angular 更新至V16版后,支援 standalone,故移除了 NgModule,而TranslateModule 又要在AppModule中 import,那该如何做呢?

2.NPM packages installation

复制代码
npm install @ngx-translate/core
npm install @ngx-translate/http-loade

3.Import TranslateModule in bootstrapApplication of main.ts

TypeScript 复制代码
// import ngx-translate and the http loader
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      NzMessageServiceModule,
      NzDrawerServiceModule,
      NzModalModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    )
  ]
}).catch(err => console.error(err));

4. Create i18n files under assets folder.

For example: i18n\en.json, i18n\zh_CN.json, i18n\zh_TW.json

5. Add key value object in i18n files.

For example: en.json

javascript 复制代码
{
    "test": {
        "title": "This is a test title."
    }
}

zh_CN.json

javascript 复制代码
{
    "test": {
        "title": "这是一个测试标题."
    }
}

zh_TW.json

javascript 复制代码
{
    "test": {
        "title": "這是一個測試標題."
    }
}

6. Import TranslateService service and TranslateModule module.

TypeScript 复制代码
import { TranslateModule, TranslateService } from '@ngx-translate/core';

...

imports: [NzButtonModule, NzSelectModule, TranslateModule, CommonModule, FormsModule, NzCardModule, NzFormModule, NzInputModule]

...

  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.selectedLang = 'en';
  }

7. Using in HTML

html 复制代码
<h1>{{ 'test.title' | translate }}</h1>

8. Using in component

TypeScript 复制代码
const lang = this.translate.instant(key);

9. Change language

TypeScript 复制代码
changeLanguage(): void {
    let lang = this.translate.getDefaultLang();
    this.translate.setDefaultLang(this.selectedLang);
    this.translate.use(this.selectedLang);
  }

10. The full source code

TypeScript 复制代码
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzSelectModule } from 'ng-zorro-antd/select';

@Component({
  selector: 'app-pages-sample-translate',
  template: `
    <br />
    <h1>{{ 'test.title' | translate }}</h1>
    <br />
    <nz-select [(ngModel)]="selectedLang" (ngModelChange)="log($event)">
      <nz-option nzLabel="English" nzValue="en"></nz-option>
      <nz-option nzLabel="简体中文" nzValue="zh_CN"></nz-option>
      <nz-option nzLabel="繁體中文" nzValue="zh_TW"></nz-option>
    </nz-select>
    <button nz-button nzType="primary" (click)="changeLanguage()">{{ 'test.changelang' | translate }}</button>
    <button nz-button (click)="getLang('test.changelang')">Get lang with Component</button>
  `,
  styles: [
    `
      nz-select {
        width: 200px;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  providers: [],
  imports: [NzButtonModule, NzSelectModule, TranslateModule, CommonModule, FormsModule, NzCardModule, NzFormModule, NzInputModule]
})
export class TranslateComponent implements OnInit {
  selectedLang: any = {};

  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.selectedLang = 'en';
  }

  ngOnInit(): void {}

  changeLanguage(): void {
    let lang = this.translate.getDefaultLang();
    this.translate.setDefaultLang(this.selectedLang);
    this.translate.use(this.selectedLang);
  }

  log(value: any): void {
    this.changeLanguage();
  }

  getLang(key: string): void {
    const lang = this.translate.instant(key);
    console.log(lang);
  }
}

11. Test result

相关推荐
web守墓人40 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法