add navbar click

app/apps.component.html

@@ -4,7 +4,8 @@
     <a href="#" class="list-group-item list-group-item-action">绯想天</a>
     <a href="#" class="list-group-item list-group-item-action disabled">永远消失的幻想乡</a>
     -->
-    <a *ngFor="let app of appsService.data" (click)="selectApp(app.id)"
+    <a *ngFor="let app of appsService.data"
+       (click)="selectApp(app.id)"
        href="#"
        class="list-group-item list-group-item-action"
        [ngClass]="{active: app.id==routingService.app}"

app/apps.component.ts

@@ -10,7 +10,12 @@ import { RoutingService } from './routing.service'
 export class AppsComponent {
 
     constructor(private appsService: AppsService, private routingService: RoutingService ) {
-        appsService.getApps();
+        appsService.getApps(()=>{
+            console.log(appsService.data)
+            if(appsService.data.length > 0) {
+                this.selectApp(appsService.data[0].id);
+            }
+        });
     }
 
     selectApp(id) {

app/apps.service.ts

@@ -17,10 +17,15 @@ export class AppsService {
     constructor(private http: Http) {
     }
 
-    getApps() {
+    getApps(callback) {
         this.http.get('./apps.json')
             .map(response => response.json())
-            .subscribe(data => {console.log(data);this.data = data});
+            .subscribe(data => {
+                this.data = data
+                if(typeof(callback) === 'function') {
+                    callback();
+                }
+            });
 
     }
 

app/mycard.component.html

@@ -2,15 +2,15 @@
     <a class="navbar-brand" href="#">MyCard</a>
     <ul class="nav navbar-nav">
         <!--
-        <li class="nav-item">
-            <a class="nav-link" href="#">商店</a>
+        <li [ngClass]="{active: routingService.component == 'store'}" class="nav-item">
+            <a (click)="changeFouce('store')" class="nav-link" href="#">商店</a>
         </li>
         -->
-        <li class="nav-item active">
-            <a class="nav-link" href="#">游戏<span class="sr-only">(current)</span></a>
+        <li [ngClass]="{active: routingService.component == 'lobby'}" class="nav-item">
+            <a (click)="changeFouce('lobby')" class="nav-link" href="#">游戏<span class="sr-only">(current)</span></a>
         </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">社区</a>
+        <li [ngClass]="{active: routingService.component == 'community'}" class="nav-item">
+            <a (click)="changeFouce('community')" class="nav-link" href="#">社区</a>
         </li>
     </ul>
     <div class="navbar-right">
@@ -19,8 +19,8 @@
                 <img id="avatar" src="https://ygobbs.com/letter_avatar_proxy/v2/letter/a/e47774/36.png" alt="image">
             </a>
             <a href="#forum" class="require-login profile item" id="username"></a>
-            <a href="#ygopro" id="logout" class="require-login item">切换账号</a>
-            <a href="#ygopro" id="refresh" class="item">刷新</a>
+            <a (click)="changeFouce('login');" href="#ygopro" id="logout" class="require-login item">切换账号</a>
+            <a (click)="refresh()" href="#ygopro" id="refresh" class="item">刷新</a>
         </div>
         <div id="window-buttons" [class.darwin]="platform == 'darwin'">
             <i id="minimize"  class="fa fa-minus" aria-hidden="true"></i>

app/mycard.component.ts

-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 declare var process;
-import { RoutingService } from './routing.service';
+declare var System;
+import {RoutingService} from './routing.service';
+const electron = System._nodeRequire('electron');
+
+
 @Component({
     selector: 'mycard',
     templateUrl: 'app/mycard.component.html',
@@ -10,5 +14,14 @@ import { RoutingService } from './routing.service';
 
 export class MyCardComponent {
     platform = process.platform;
-  constructor(private routingService: RoutingService) { }
+
+    constructor(private routingService: RoutingService) {
+    }
+
+    changeFouce(component) {
+        this.routingService.component = component;
+    }
+    refresh() {
+        electron.remote.getCurrentWindow().reload()
+    }
 }