Question

我正在使用angular-cli工具编写一个带有Typescript的Angular 2应用程序。我的后端API有一堆JSON模式，我想在我的打字稿中引用，所以我可以将这些模式传递给模式验证器。包含.json文件的最佳方法是什么，以便我可以在我的打字稿中将它们作为变量引用，并且当我使用angular-cli进行构建时，还可以将它们正确捆绑？

我的第一个想法是创建一个自定义模块并将每个模式导出为const。我不确定这是否可能，并且无法找到有关如何引用文件的任何示例语法。

这是我现在可以使用的示例代码。唯一的问题是我必须将模式文件内容复制到我的typesrcipt中。我希望能够引用原始模式文件。

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";

import { Observable } from "rxjs/Observable";
import { WlanStatus } from "./wlan-status";
import { JsonValidatorService } from "../../json-validator.service";

//import WlanStatusSchema from "../../../api/app/plugins/wifi/schemas/getStatus.json";
const wlanStatusSchema =
{
    "type": "object",
    "properties": {
        "result": {
            "type": "object",
            "properties": {
                "cardState": {
                    "type": "integer"
                },
                "profileName": {
                    "type": "string"
                },
                "clientMAC": {
                    "type": "string"
                },
                "clientIP": {
                    "type": "string",
                    "format": "ipv4"
                },
                "clientName": {
                    "type": "string"
                },
                "AP_MAC": {
                    "type": "string"
                },
                "AP_IP": {
                    "type": "string"
                },
                "APName": {
                    "type": "string"
                },
                "Channel": {
                    "type": "integer"
                },
                "RSSI": {
                    "type": "integer"
                },
                "bitRate": {
                    "type": "integer"
                },
                "txPower": {
                    "type": "integer"
                },
                "DTIM": {
                    "type": "integer"
                },
                "beaconPeriod": {
                    "type": "integer"
                },
                "SSID": {
                    "type": "string"
                },
                "currentRadioMode": {
                    "type": "integer"
                }
            },
            "required": [
                "cardState",
                "profileName",
                "clientMAC",
                "clientIP",
                "clientName",
                "AP_MAC",
                "AP_IP",
                "APName",
                "Channel",
                "RSSI",
                "bitRate",
                "txPower",
                "DTIM",
                "beaconPeriod",
                "SSID",
                "currentRadioMode"
            ]
        }
    },
    "required": [
        "result"
    ]
};

@Injectable()
export class WlanService
{
    private getStatusUrl = 'app/getWlanStatus';  // URL to web API

    constructor(private http: Http, private validator: JsonValidatorService) { }

scan(): void
{
    console.log("Scanning for APs...")
}

getStatus(): Observable<WlanStatus>
{
    return this.issueRequest(this.getStatusUrl, wlanStatusSchema);
}

private issueRequest(requestUrl: string, schema: any): Observable<Object>
{
    return this.http.get(requestUrl)
        .map((res: Response) =>
        {
            let body = res.json();
            let valid = this.validator.validate(schema, body.data);
            if (!valid)
            {
                throw (new TypeError("Not a valid response: " + JSON.stringify(this.validator.getErrors())));
            }

            return body.data.result;
        })
        .catch(this.handleError);
}

private handleError(error: Response | any)
{
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response)
    {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else
    {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
}
}

Answer 1

假设您有权访问后端API，则可以添加新的API Point以获取JSON文件。然后在Angular应用程序中，您应该能够使用HTTP Client使用该API Point。从那里，您可以获取JSON文件内容并将其分配给typescript中的变量。

Answer 2

您是否应该设置用于验证架构的类文件？然后，您的视觉工作室将在您创建时显示此类错误。

喜欢的东西出口类英雄{ 身份证号码; name：string; }

Answer 3

因为我使用的是angular-cli而且它使用了webpack，所以我能够通过使用require（）函数来解决我的问题。 Webpack将以这种方式正确捆绑.json文件。

我创建了一个打字稿文件来导入我的所有模式，wlan-schema.ts：

export const WlanStatusSchema = require("../../../../api/app/plugins/wifi/schemas/getStatus.json");

在我的wlan.service.ts中使用它：

import * as schema from "./wlan-schema";

this.validator.validate(schema.WlanStatusSchema, apiResp);

Answer 4

这就是我做的。这是一个注册表格的例子。

我使用@types/json-schema作为类型（JSONSchema4）。

<强> register.component.ts

...
import * as registerSchema from '../../../../shared/schemas/api/create-user.json';
import {JSONSchema4} from 'json-schema';
... 
export class RegisterComponent {
    registerSchema: JSONSchema4 = registerSchema;
    constructor(){
         console.log(registerSchema.$schema);
    }
}

<强> typings.d.ts

declare module '*.json' {
  const value: any;
  export default value;
}

在typescript

4 个答案: