feat: init i18n

phodal · Apr 14, 2020 · 2e9e226 · 2e9e226
1 parent 652831b
commit 2e9e226
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,8 @@
  "@ledge-framework/render": "~0.0.14",
  "@ngx-pwa/local-storage": "^9.0.2",
  "@ngx-starter-kit/ngx-utils": "^0.0.8",
+ "@ngx-translate/core": "^12.1.2",
+ "@ngx-translate/http-loader": "^4.0.0",
  "@scullyio/init": "^0.0.23",
  "@scullyio/ng-lib": "latest",
  "@scullyio/scully": "latest",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,27 +1,28 @@
 <div [ngClass]="isHome() ? 'app-header' : ''">
  <mat-toolbar color="accent">
- <mat-toolbar-row >
+ <mat-toolbar-row>
  <button mat-button class="button-logo" routerLink="/home">
  <img src="/assets/images/logo.svg" alt="logo" class="logo">
  </button>
  <span class="spacer"></span>
  <div class="right">
- <button mat-button routerLink="/home" routerLinkActive="active" i18n="@@home">首页</button>
- <button mat-button routerLink="/case-study" routerLinkActive="active" i18n="@@case-study">案例学习</button>
- <button mat-button routerLink="/pattern" routerLinkActive="active" i18n="@@pattern-rules">模式与原则</button>
- <button mat-button routerLink="/practise" routerLinkActive="active" i18n="@@best-practise">最佳实践</button>
- <button mat-button routerLink="/manual" routerLinkActive="active" i18n="@@manual">操作手册</button>
- <button mat-button routerLink="/solution" routerLinkActive="active" i18n="@@solution">解决方案</button>
- <button mat-button routerLink="/think-tank" routerLinkActive="active" i18n="@@think-tank">智库</button>
+ <button mat-button routerLink="/home" routerLinkActive="active">{{ 'home' | translate}}</button>
+ <button mat-button routerLink="/case-study" routerLinkActive="active">{{ 'case-study' | translate}}</button>
+ <button mat-button routerLink="/pattern" routerLinkActive="active">{{ 'patterns' | translate}}</button>
+ <button mat-button routerLink="/practise" routerLinkActive="active">{{ 'practises' | translate}}</button>
+ <button mat-button routerLink="/manual" routerLinkActive="active">{{ 'manual' | translate}}</button>
+ <button mat-button routerLink="/solution" routerLinkActive="active">解决方案</button>
+ <button mat-button routerLink="/think-tank" routerLinkActive="active">智库</button>
 
  <mat-menu #appMenu="matMenu" backdropClass="nav-menu-wrapper">
- <button mat-menu-item routerLink="/mobile" routerLinkActive="active" i18n="@@mobile">移动端</button>
- <button mat-menu-item routerLink="/maturity" routerLinkActive="active" i18n="@@maturity">度量</button>
- <button mat-menu-item routerLink="/report" routerLinkActive="active" i18n="@@report">年度报告</button>
- <button mat-menu-item routerLink="/resources" routerLinkActive="active" i18n="@@resources">DevOps 相关资源</button>
+ <button mat-menu-item routerLink="/mobile" routerLinkActive="active">移动端</button>
+ <button mat-menu-item routerLink="/maturity" routerLinkActive="active">度量</button>
+ <button mat-menu-item routerLink="/report" routerLinkActive="active">年度报告</button>
+ <button mat-menu-item routerLink="/resources" routerLinkActive="active">DevOps 相关资源</button>
  </mat-menu>
  <button mat-button [matMenuTriggerFor]="appMenu">
- 资源<mat-icon>arrow_drop_down</mat-icon>
+ 资源
+ <mat-icon>arrow_drop_down</mat-icon>
  </button>
 
  <mat-menu #toolsetMenu="matMenu" backdropClass="nav-menu-wrapper">
@@ -32,7 +33,8 @@
  </mat-menu>
 
  <button mat-button [matMenuTriggerFor]="toolsetMenu">
- 工具<mat-icon>arrow_drop_down</mat-icon>
+ 工具
+ <mat-icon>arrow_drop_down</mat-icon>
  </button>
  </div>
  </mat-toolbar-row>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
  selector: 'app-root',
@@ -9,7 +10,10 @@ import { Router } from '@angular/router';
 export class AppComponent {
  title = 'ledge';
 
- constructor(private route: Router) {}
+ constructor(private route: Router, translate: TranslateService) {
+ translate.setDefaultLang('zh-cn');
+ translate.use('zh-cn');
+ }
 
  // component-todo: refactor
  isHome() {

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule, Title } from '@angular/platform-browser';
@@ -18,16 +18,15 @@ import { ResourcesComponent } from './presentation/resources/resources.component
 import { ThinkTankComponent } from './presentation/think-tank/think-tank.component';
 import { CustomMaterialModule } from './shared/custom-material.module';
 import { SharedModule } from './shared/shared.module';
-import { registerLocaleData } from '@angular/common';
-
-import localeGb from '@angular/common/locales/en-GB';
-import localZhHans from '@angular/common/locales/zh-Hans';
 import { ScullyLibModule } from '@scullyio/ng-lib';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
-registerLocaleData(localeGb, 'en-gb');
-registerLocaleData(localZhHans, 'zh-Hans');
+export function createTranslateLoader(http: HttpClient) {
+ return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
  declarations: [
@@ -55,6 +54,13 @@ registerLocaleData(localZhHans, 'zh-Hans');
  CustomMaterialModule,
  LedgeRenderModule,
  ScullyLibModule,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useFactory: createTranslateLoader,
+ deps: [HttpClient],
+ },
+ }),
  ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  }),

diff --git a/src/app/presentation/home/home.module.ts b/src/app/presentation/home/home.module.ts
@@ -7,6 +7,13 @@ import { CustomMaterialModule } from '../../shared/custom-material.module';
 import { PeriodicTableModule } from '../../features/periodic-table/periodic-table.module';
 import { HttpClientModule } from '@angular/common/http';
 import { InViewportModule } from '@ngx-starter-kit/ngx-utils';
+import {
+ MissingTranslationHandler,
+ TranslateCompiler,
+ TranslateLoader,
+ TranslateModule,
+ TranslateParser,
+} from '@ngx-translate/core';
 
 @NgModule({
  declarations: [HomeComponent],
@@ -18,6 +25,9 @@ import { InViewportModule } from '@ngx-starter-kit/ngx-utils';
  PeriodicTableModule,
  CustomMaterialModule,
  RouterModule.forChild([{ path: '', component: HomeComponent }]),
+ TranslateModule.forChild({
+ isolate: true,
+ }),
  ],
 })
 export class HomeModule {}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -10,6 +10,7 @@ import { MarkdownRatingComponent } from '../features/rating-radar-chart/markdown
 import { RatingRadarChartComponent } from '../features/rating-radar-chart/rating-radar-chart.component';
 import { MarkdownRenderComponent } from '../features/markdown-render/markdown-render.component';
 import { CustomMaterialModule } from './custom-material.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
  imports: [
@@ -20,6 +21,7 @@ import { CustomMaterialModule } from './custom-material.module';
  ReactiveFormsModule,
  CustomMaterialModule,
  LedgeRenderModule,
+ TranslateModule,
  MarkdownModule.forRoot({
  sanitize: SecurityContext.NONE,
  loader: HttpClient,

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -0,0 +1,7 @@
+{
+ "home": "Home",
+ "case-study": "Cases",
+ "patterns": "Patterns",
+ "practises": "Practises",
+ "manual": "Manual"
+}
diff --git a/src/assets/i18n/zh-cn.json b/src/assets/i18n/zh-cn.json
@@ -0,0 +1,7 @@
+{
+ "home": "首页",
+ "case-study": "案例学习",
+ "patterns": "模式与原则",
+ "practises": "最佳实践",
+ "manual": "操作手册"
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1253,10 +1253,10 @@
  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@ledge-framework/render@~0.0.12":
- version "0.0.12"
- resolved "https://registry.yarnpkg.com/@ledge-framework/render/-/render-0.0.12.tgz#3b4468d694cf99a8f2be1fc4bebd4254b8026e64"
- integrity sha512-TuLRySWh7O29bfWdCCIyqDc4yAaCwhjM9lms5DsKzXP8SQdZQVuXYeRc3k8HNlYrOcNZieRzPdxPylCQkuV9bg==
+"@ledge-framework/render@~0.0.14":
+ version "0.0.14"
+ resolved "https://registry.yarnpkg.com/@ledge-framework/render/-/render-0.0.14.tgz#07f22f67f26122f0d6f901cb34e8c2070e2cf281"
+ integrity sha512-ebHa9G2Y+wPzz3sOcCzC8mfZpkuBgZCg25l7TVJsOY4FuvD5ljaCRQZ0N5L8+g57W7OeNr9Mzry2qLhufRCr6Q==
 
 "@marionebl/sander@^0.6.0":
  version "0.6.1"
@@ -1289,6 +1289,18 @@
  dependencies:
  tslib "^1.9.0"
 
+"@ngx-translate/core@^12.1.2":
+ version "12.1.2"
+ resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-12.1.2.tgz#0c6f24249953a79cfc2d581b2cd1b5d6d338d9db"
+ integrity sha512-ZudJsqIxTKlLmPoqK8gJY3UpMGujR0Xm7HfXL6AR79yGRS23QqpjAhMfx4v5qUCcHMmQ9/78bW8QJLfp31c7vQ==
+
+"@ngx-translate/http-loader@^4.0.0":
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-4.0.0.tgz#8a555248ad4b7d513460fcec9da25b0447962f1d"
+ integrity sha512-x8LumqydWD7eX9yQTAVeoCM9gFUIGVTUjZqbxdAUavAA3qVnk9wCQux7iHLPXpydl8vyQmLoPQR+fFU+DUDOMA==
+ dependencies:
+ tslib "^1.9.0"
+
 "@nodelib/[email protected]":
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"