add apps click

app/app-detail.component.css

@@ -2,4 +2,8 @@
     background-color: #c3d9ff;
     flex-grow: 1;
     overflow-y: auto;
+}
+
+.hidden {
+    display: none;
 }
\ No newline at end of file

app/app-detail.component.html

-<h1>东方绯想天则</h1>
+<h1>{{name()}}</h1>
 
-<div>
+<div *ngIf="!isInstalled()">
     <button type="button" class="btn btn-primary">安装</button>
     <button type="button" class="btn btn-secondary">导入</button>
     <button type="button" class="btn btn-secondary">正版代购</button>
 </div>
-<div>
+<div *ngIf="isInstalled()">
     <button type="button" class="btn btn-primary">运行</button>
     <button type="button" class="btn btn-secondary">设置</button>
     <button type="button" class="btn btn-secondary">游览本地文件</button>

app/app-detail.component.ts

-/**
- * Created by zh99998 on 16/9/2.
- */
 import { Component } from '@angular/core';
+import { AppsService } from './apps.service'
+import { RoutingService } from './routing.service'
 @Component({
     selector: 'app-detail',
     templateUrl: 'app/app-detail.component.html',
     styleUrls: ['app/app-detail.component.css'],
 })
-export class AppDetailComponent { }
+export class AppDetailComponent {
+    name() {
+        if(this.appsService.detail[this.routingService.app])
+        {
+            return this.appsService.detail[this.routingService.app].name;
+        } else {
+            return this.appsService.detail["default"].name;
+        }
+    };
+
+    isInstalled() {
+        if(this.appsService.detail[this.routingService.app])
+        {
+            return this.appsService.detail[this.routingService.app].isInstalled;
+        } else {
+            return this.appsService.detail["default"].isInstalled;
+        }
+    }
+
+    constructor(private appsService: AppsService, private routingService: RoutingService ) {
+    }
+
+}

app/apps.component.html

 <div class="list-group">
-    <a href="#" class="list-group-item active">
-        游戏王
-    </a>
+    <!--
+    <a href="#" class="list-group-item active">游戏王</a>
     <a href="#" class="list-group-item list-group-item-action">绯想天</a>
     <a href="#" class="list-group-item list-group-item-action disabled">永远消失的幻想乡</a>
-    <a href="#" class="list-group-item list-group-item-action disabled"></a>
+    -->
+    <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.name}}
+    </a>
+    <a href="#" class="list-group-item list-group-item-action disabled">{{routingService.app}}</a>
 </div>
\ No newline at end of file

app/apps.component.ts

-/**
- * Created by zh99998 on 16/9/2.
- */
 import { Component } from '@angular/core';
 import { AppsService } from './apps.service'
+import { RoutingService } from './routing.service'
+
 @Component({
     selector: 'apps',
     templateUrl: 'app/apps.component.html',
     styleUrls: ['app/apps.component.css'],
 })
 export class AppsComponent {
-    data = '';
 
-    constructor(private appsService: AppsService) {
+    constructor(private appsService: AppsService, private routingService: RoutingService ) {
         appsService.getApps();
-        //this.data = appsService.data;
     }
 
+    selectApp(id) {
+        this.routingService.app = id;
+        this.getDetail();
+    }
+
+    getDetail() {
+        for(let i = 0; i < this.appsService.data.length; i++){
+            let x = this.appsService.data[i];
+            if(x.id == this.routingService.app) {
+                this.appsService.detail[this.routingService.app] = x;
+            }
+        }
+        console.log(this.appsService.detail);
+    }
 }

app/apps.service.ts

@@ -4,17 +4,24 @@ import 'rxjs/Rx';
 
 @Injectable()
 export class AppsService {
-    constructor(private http: Http) {
-    }
+    data;
 
-    data = '';
+    detail = {
+        "default": {
+            "id": "id",
+            "name": "name",
+            "isInstalled": false
+        },
+    }
 
+    constructor(private http: Http) {
+    }
 
     getApps() {
-        console.log(123);
         this.http.get('./apps.json')
             .map(response => response.json())
-            .subscribe(data => this.data = data);
+            .subscribe(data => {console.log(data);this.data = data});
+
     }
 
 }
\ No newline at end of file

apps.json

 [
   {
-    id: "th105",
-    name: "东方绯想天"
+    "id": "th105",
+    "name": "东方绯想天",
+    "isInstalled": true
   },
   {
-    id: "th12",
-    name: "东方地灵殿"
+    "id": "th12",
+    "name": "东方地灵殿",
+    "isInstalled": false
   },
   {
-    id: "th13",
-    name: "东方UFO"
+    "id": "th13",
+    "name": "东方UFO",
+    "isInstalled": false
   }
 ]
\ No newline at end of file