i18n

app/app-detail.component.html

-<h1>{{name}}</h1>
+<h1>{{'app.' + currentApp.id + '.name' | translate}}</h1>
 <h2>{{appsService._aa}}</h2>
 <div *ngIf="!isInstalled">
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#install-modal">安装</button>
@@ -52,7 +52,7 @@
         <tbody>
         <tr *ngFor="let mod of mods; let i = index">
             <th scope="row">{{i + 1}}</th>
-            <td>{{searchApp(mod.id).name[searchApp(mod.id).locales[0]]}}</td>
+            <td>{{'app.' + mod.id + '.name' | translate}}</td>
             <td>{{mod.type}}</td>
             <td *ngIf="checkInstall(mod.id)">
                 <button type="button" class="btn btn-danger btn-sm">卸载</button></td>

app/apps.service.ts

-import {Injectable} from '@angular/core';
+import {Injectable, transition} from '@angular/core';
 import {Http} from '@angular/http';
 import 'rxjs/Rx';
 import {App} from "./app";
 import {AppLocal} from "./app-local";
+import {TranslateService} from "ng2-translate";
 
 @Injectable()
 export class AppsService {
 
-    constructor(private http: Http) {
-        let loop = setInterval(()=>{
-            this.aria2.tellActive().then((res)=>{
+    constructor(private http: Http, private translate: TranslateService) {
+        let loop = setInterval(()=> {
+            this.aria2.tellActive().then((res)=> {
                 console.log('res:', res);
                 this.downloadsInfo = res;
             })
@@ -23,7 +24,7 @@ export class AppsService {
     electron = window['System']._nodeRequire('electron');
     Aria2 = window['System']._nodeRequire('aria2');
 
-    data : App[];
+    data: App[];
     downloadsInfo = {};
 
 
@@ -32,17 +33,17 @@ export class AppsService {
 
     _aria2;
     get aria2() {
-        if(!this._aria2) {
+        if (!this._aria2) {
             this._aria2 = new this.Aria2();
             console.log("new aria2");
-            this._aria2.onopen = ()=>{
+            this._aria2.onopen = ()=> {
                 console.log('aria2 open');
             };
-            this._aria2.onclose = ()=>{
+            this._aria2.onclose = ()=> {
                 console.log('aria2 close');
                 this.aria2IsOpen = false;
             };
-            this._aria2.onDownloadComplete = (response)=>{
+            this._aria2.onDownloadComplete = (response)=> {
                 console.log(response);
                 //aria2.tellStatus(tmp_gid, (err, res)=>{
                 //    if(res.followedBy) {
@@ -51,15 +52,15 @@ export class AppsService {
                 //    console.log(res);
                 //});
             };
-            this._aria2.onmessage = (m)=>{
+            this._aria2.onmessage = (m)=> {
                 console.log('IN:', m);
                 console.log('download infoi:', this.downloadsInfo);
 
             }
         }
 
-        if(!this.aria2IsOpen) {
-            this._aria2.open().then(()=>{
+        if (!this.aria2IsOpen) {
+            this._aria2.open().then(()=> {
                 console.log('aria2 websocket open')
                 this.aria2IsOpen = true;
             });
@@ -73,10 +74,10 @@ export class AppsService {
     get download_dir() {
         const dir = this.path.join(this.electron.remote.app.getAppPath(), 'cache');
 
-        if(!this.fs.existsSync(dir)) {
+        if (!this.fs.existsSync(dir)) {
             console.log('cache not exists');
-            this.mkdirp(dir, (err)=>{
-                if(err) {
+            this.mkdirp(dir, (err)=> {
+                if (err) {
                     console.error(err)
                 } else {
                     console.log('create cache dir');
@@ -92,10 +93,21 @@ export class AppsService {
             .map(response => {
                 return response.json()
             })
-            .subscribe(data => {
+            .subscribe((data) => {
                 this.data = data;
+                for (let app of data) {
+                    //console.log(app)
+                    for (let attribute of ['name', 'description']) {
+                        if(!app[attribute]){continue} //这句应当是不需要的, 如果转换成了 App 类型, 应当保证一定有这些属性
+                        for (let locale of Object.keys(app[attribute])) {
+                            let result = {};
+                            result[`app.${app['id']}.${attribute}`] = app[attribute][locale];
+                            this.translate.setTranslation(locale, result, true);
+                        }
+                    }
+                }
                 //console.log(this.data);
-                if(typeof(callback) === 'function') {
+                if (typeof(callback) === 'function') {
                     callback();
                 }
             });
@@ -106,7 +118,7 @@ export class AppsService {
         console.log(uri);
         let tmp_gid;
         this.aria2.addUri([uri], {'dir': this.download_dir}, (error, gid)=> {
-            if(error) {
+            if (error) {
                 console.error(error);
             }
             console.log(gid);

app/mycard.component.html

@@ -7,10 +7,10 @@
         </li>
         -->
         <li [ngClass]="{active: routingService.component == 'lobby'}" class="nav-item">
-            <a (click)="changeFouce('lobby')" class="nav-link" href="#">游戏<span class="sr-only">(current)</span></a>
+            <a (click)="changeFouce('lobby')" class="nav-link" href="#">{{'library'| translate}}<span class="sr-only">(current)</span></a>
         </li>
         <li [ngClass]="{active: routingService.component == 'community'}" class="nav-item">
-            <a (click)="changeFouce('community')" class="nav-link" href="#">社区</a>
+            <a (click)="changeFouce('community')" class="nav-link" href="#">{{'community'| translate}}</a>
         </li>
     </ul>
     <div class="navbar-right">

app/mycard.component.ts

 import {Component, Renderer} from '@angular/core';
-declare var process;
-declare var System;
+import {TranslateService} from 'ng2-translate/ng2-translate';
 import {RoutingService} from './routing.service';
 const electron = System._nodeRequire('electron');
+declare var process;
+declare var System;
 
 
 @Component({
@@ -15,16 +16,24 @@ const electron = System._nodeRequire('electron');
 export class MyCardComponent {
     platform = process.platform;
 
-    constructor(private routingService: RoutingService, private renderer: Renderer) {
+    constructor(private routingService: RoutingService, private renderer: Renderer, private translate: TranslateService) {
         renderer.listenGlobal('window', 'message', (event) => {
             console.log(event);
             // Do something with 'event'
         });
+
+        // this language will be used as a fallback when a translation isn't found in the current language
+        translate.setDefaultLang('en-US');
+
+        // the lang to use, if the lang isn't available, it will use the current loader to get them
+        translate.use(electron.remote.app.getLocale());
+
     }
 
     changeFouce(component) {
         this.routingService.component = component;
     }
+
     refresh() {
         electron.remote.getCurrentWindow().reload()
     }

app/mycard.module.ts

@@ -15,8 +15,10 @@ import {CommunityComponent} from './community.component';
 import {RoutingService} from './routing.service';
 import {AppsService} from './apps.service';
 
+import {TranslateModule} from 'ng2-translate/ng2-translate';
+
 @NgModule({
-    imports: [BrowserModule, HttpModule],
+    imports: [BrowserModule, HttpModule, TranslateModule.forRoot()],
     declarations: [MyCardComponent, LoginComponent, StoreComponent, LobbyComponent, CommunityComponent, AppsComponent, AppDetailComponent, RosterComponent, CandyComponent],
     bootstrap: [MyCardComponent],
     providers: [RoutingService, AppsService],

i18n/zh-CN.json

+{
+  "library": "游戏",
+  "community": "社区"
+}

package.json

@@ -34,6 +34,7 @@
     "bootstrap": "next",
     "core-js": "latest",
     "font-awesome": "latest",
+    "ng2-translate": "latest",
     "reflect-metadata": "latest",
     "rxjs": "latest",
     "systemjs": "latest",

systemjs.config.js

@@ -2,19 +2,21 @@
  * System configuration for Angular 2 samples
  * Adjust as necessary for your application needs.
  */
-(function(global) {
+(function (global) {
     // map tells the System loader where to look for things
     var map = {
         'app': 'app', // 'dist',
         '@angular': 'node_modules/@angular',
         'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-    'rxjs':                       'node_modules/rxjs'
+        'rxjs': 'node_modules/rxjs',
+        'ng2-translate': 'node_modules/ng2-translate',
     };
     // packages tells the System loader how to load when no filename and/or no extension
     var packages = {
-    'app':                        { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs':                       { defaultExtension: 'js' },
-    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
+        'app': {main: 'main.js', defaultExtension: 'js'},
+        'rxjs': {defaultExtension: 'js'},
+        'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
+        'ng2-translate': {main: 'ng2-translate.js', defaultExtension: 'js'},
     };
     var ngPackageNames = [
         'common',
@@ -30,12 +32,14 @@
     ];
     // Individual files (~300 requests):
     function packIndex(pkgName) {
-    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+        packages['@angular/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
     }
+
     // Bundled (~40 requests):
     function packUmd(pkgName) {
-    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+        packages['@angular/' + pkgName] = {main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};
     }
+
     // Most environments should use UMD; some (Karma) need the individual index files
     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
     // Add package entries for angular packages