Commit 5e4d1e79 authored by h3remi7's avatar h3remi7

add apps click

parent 6df98e85
...@@ -2,4 +2,8 @@ ...@@ -2,4 +2,8 @@
background-color: #c3d9ff; background-color: #c3d9ff;
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
}
.hidden {
display: none;
} }
\ No newline at end of file
<h1>东方绯想天则</h1> <h1>{{name()}}</h1>
<div> <div *ngIf="!isInstalled()">
<button type="button" class="btn btn-primary">安装</button> <button type="button" class="btn btn-primary">安装</button>
<button type="button" class="btn btn-secondary">导入</button> <button type="button" class="btn btn-secondary">导入</button>
<button type="button" class="btn btn-secondary">正版代购</button> <button type="button" class="btn btn-secondary">正版代购</button>
</div> </div>
<div> <div *ngIf="isInstalled()">
<button type="button" class="btn btn-primary">运行</button> <button type="button" class="btn btn-primary">运行</button>
<button type="button" class="btn btn-secondary">设置</button> <button type="button" class="btn btn-secondary">设置</button>
<button type="button" class="btn btn-secondary">游览本地文件</button> <button type="button" class="btn btn-secondary">游览本地文件</button>
......
/**
* Created by zh99998 on 16/9/2.
*/
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { AppsService } from './apps.service'
import { RoutingService } from './routing.service'
@Component({ @Component({
selector: 'app-detail', selector: 'app-detail',
templateUrl: 'app/app-detail.component.html', templateUrl: 'app/app-detail.component.html',
styleUrls: ['app/app-detail.component.css'], 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 ) {
}
}
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item active"> <!--
游戏王 <a href="#" class="list-group-item active">游戏王</a>
</a>
<a href="#" class="list-group-item list-group-item-action">绯想天</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 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> </div>
\ No newline at end of file
/**
* Created by zh99998 on 16/9/2.
*/
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { AppsService } from './apps.service' import { AppsService } from './apps.service'
import { RoutingService } from './routing.service'
@Component({ @Component({
selector: 'apps', selector: 'apps',
templateUrl: 'app/apps.component.html', templateUrl: 'app/apps.component.html',
styleUrls: ['app/apps.component.css'], styleUrls: ['app/apps.component.css'],
}) })
export class AppsComponent { export class AppsComponent {
data = '';
constructor(private appsService: AppsService) { constructor(private appsService: AppsService, private routingService: RoutingService ) {
appsService.getApps(); 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);
}
} }
...@@ -4,17 +4,24 @@ import 'rxjs/Rx'; ...@@ -4,17 +4,24 @@ import 'rxjs/Rx';
@Injectable() @Injectable()
export class AppsService { export class AppsService {
constructor(private http: Http) { data;
}
data = ''; detail = {
"default": {
"id": "id",
"name": "name",
"isInstalled": false
},
}
constructor(private http: Http) {
}
getApps() { getApps() {
console.log(123);
this.http.get('./apps.json') this.http.get('./apps.json')
.map(response => response.json()) .map(response => response.json())
.subscribe(data => this.data = data); .subscribe(data => {console.log(data);this.data = data});
} }
} }
\ No newline at end of file
[ [
{ {
id: "th105", "id": "th105",
name: "东方绯想天" "name": "东方绯想天",
"isInstalled": true
}, },
{ {
id: "th12", "id": "th12",
name: "东方地灵殿" "name": "东方地灵殿",
"isInstalled": false
}, },
{ {
id: "th13", "id": "th13",
name: "东方UFO" "name": "东方UFO",
"isInstalled": false
} }
] ]
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment