我不确定当前的实现...当我从JSON数据库中检索每个属性时，我怎么能确定每个属性都是使用我导出的FMTyped类进行了正确的类型/解析/序列化？
我在正确的组件和服务中导出并声明了FMTyped，但如果我删除 ectm-fanmissions.typed.ts 的内容，我看不出任何差异（http://localhost:4200/ ）...
我应该使用接口，类，构造函数......？我是否应该导出每个（导出XXX名称{}），即使我只使用父类FMTyped？
当我使用像 json2ts （http://json2ts.com/）这样的转换器时，转换后的模式会合并到一个名为namespace的声明模块中：
declare module namespace {
export interface Characteristics {
custommotions: boolean;
customcreatures: boolean;
customobjects: boolean;
customsounds: boolean;
customtextures: boolean;
customscripts: boolean;
customgamesys: boolean;
bgmusic: boolean;
movies: boolean;
map: boolean;
automap: boolean;
booksandscrolls: boolean;
goaldescription: boolean;
}
export interface Details {
author: string[];
description: string;
game: string;
ttlg: string;
category: string;
contest: string;
language: string[];
version: number;
newdark: boolean;
newdarkminrequiredversion: number;
firstmisreleasedate: number;
lastmisupdatedate: number;
characteristics: Characteristics;
}
export interface Download {
main: string;
mirror: string[];
}
export interface Walkthrough {
url: string;
language: string;
}
export interface Extras {
download: Download[];
screenshots: string[];
youtube: string;
walkthrough: Walkthrough[];
}
export interface RootObject {
index: number;
_id: string;
name: string;
details: Details;
extras: Extras;
}
}
那好吗？如何在我的组件和相关服务中使用它？我该怎么办？我怎么能包含这段代码？任何教程或什么？
这是我的JSON数据库： ectm-fanmissions.json
[
{
"index": 0,
"_id": "58fc458815350f4c0e3454a2",
"name": "cillum excepteur deserunt eiusmod",
"details": {
"author": [
"Gregory Rhodes",
"Jonathan Linat"
],
"description": "Dolore labore aute incididunt Lorem excepteur enim sit mollit. Voluptate adipisicing incididunt non pariatur labore occaecat non ipsum labore. Voluptate irure labore proident non Lorem minim sint velit sint id elit. Adipisicing voluptate commodo reprehenderit anim fugiat laboris dolore sit enim elit labore nulla. Pariatur elit aute officia sint. Duis mollit pariatur sit consequat et fugiat.\n\nQuis adipisicing labore minim anim consectetur ea laborum laboris amet nulla. In qui labore velit quis cupidatat ipsum sit do ipsum eu ex elit laboris. Duis aute laboris in elit aliqua eiusmod excepteur culpa nisi.",
"game": "TDP",
"ttlg": "http://www.ttlg.com/forums/showthread.php?t=120288",
"category": "Dock/Harbour/Port/Ship",
"contest": "Thief Reloaded Contest",
"language": [
"polish",
"dutch"
],
"version": 1.3,
"newdark": true,
"newdarkminrequiredversion": 1.24,
"firstmisreleasedate": 1094296286179,
"lastmisupdatedate": 1492047084343,
"characteristics": {
"custommotions": true,
"customcreatures": true,
"customobjects": true,
"customsounds": false,
"customtextures": false,
"customscripts": true,
"customgamesys": true,
"bgmusic": false,
"movies": false,
"map": true,
"automap": true,
"booksandscrolls": false,
"goaldescription": false
}
},
"extras": {
"download": [
{
"main": "http://thiefmissions.com/m/chonmigoroshiv2",
"mirror": [
"http://95.31.27.16/fan-missions/thief2/breathing_corpses/T2FM-BreathingCorpses[MULTI][07April2017].zip",
"https://drive.google.com/file/d/0B9b8asJ7aeC0blM5MXAtaHd4bjQ/view?usp=sharing"
]
}
],
"screenshots": [
"http://darkfate.org/view/simple/files/fan-missions/thief2/breathing_corpses/screenshots/dump002.jpg",
"http://darkfate.org/view/simple/files/fan-missions/thief2/breathing_corpses/screenshots/dump000.jpg",
"http://darkfate.org/view/simple/files/fan-missions/thief2/breathing_corpses/screenshots/dump002.jpg"
],
"youtube": "sTCA4RFvNCQ",
"walkthrough": [
{
"url": "http://www.zinkchristine.de/la5e.html",
"language": "spanish"
}
]
}
}
]
这是我的TypedJSON架构： ectm-fanmissions.typed.ts
export class FMTyped {
index: number;
_id: number;
name: string;
details: Details;
extras: Extras;
}
class Details {
author: string[];
description: string;
game: string;
ttlg: string;
category: string;
contest: string;
language: string[];
version: string;
newdark: boolean;
newdarkminrequiredversion: string;
firstmisreleasedate: Date;
lastmisupdatedate: Date;
characteristics: Characteristics;
}
class Characteristics {
custommotions: boolean;
customcreatures: boolean;
customobjects: boolean;
customsounds: boolean;
customtextures: boolean;
customscripts: boolean;
customgamesys: boolean;
bgmusic: boolean;
movies: boolean;
map: boolean;
automap: boolean;
booksandscrolls: boolean;
goaldescription: boolean;
}
class Extras {
download: Download[];
screenshots: string[];
youtube: string;
walkthrough: Walkthrough[];
}
class Download {
main: string;
mirror: string[];
}
class Walkthrough {
url: string;
language: string;
}
这是我用来检索我的JSON数据库的服务： ectm.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { FMTyped } from './../apidata/ectm-fanmissions.typed';
@Injectable()
export class EctmService {
constructor(private _http: Http) { }
private apidataEctmFanmissionsUrl = './../apidata/ectm-fanmissions.json';
getFMs(): Observable<FMTyped[]>{
return this._http.get(this.apidataEctmFanmissionsUrl)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
}
这是我需要显示我的JSON数据库属性的组件： ectm-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FMTyped } from './../../apidata/ectm-fanmissions.typed';
import { EctmService } from './../ectm.service';
@Component({
selector: 'ectm-list',
templateUrl: './ectm-list.component.html',
styleUrls: ['./ectm-list.component.css']
})
export class EctmListComponent implements OnInit {
constructor(private _ectmService: EctmService) { }
fanmissions: FMTyped[];
loadFMs() {
this._ectmService.getFMs()
.subscribe(fanmissions => this.fanmissions = fanmissions, err => { console.log(err); });
}
ngOnInit() {
this.loadFMs();
}
}