如何在Angular 5中读取JSON文件并动态构建TypeScript Model类

我来帮你一步步实现从指定JSON提取字段并生成Model类的需求：

第一步：读取目标JSON文件 #

首先把你的JSON文件放在Angular项目的assets目录下（方便通过HttpClient访问），然后创建一个服务来读取这个文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LayoutService {
  constructor(private http: HttpClient) {}

  // 获取JSON中的layoutItems数据
  getLayoutConfig(): Observable<any> {
    return this.http.get('/assets/layout-config.json'); // 替换成你的JSON文件名
  }
}

第二步：提取name和type数组 #

在组件或服务中调用上面的方法，拿到数据后提取需要的两个数组：

import { Component, OnInit } from '@angular/core';
import { LayoutService } from './layout.service';

@Component({
  selector: 'app-model-generator',
  templateUrl: './model-generator.component.html'
})
export class ModelGeneratorComponent implements OnInit {
  private propertyNames: string[] = [];
  private propertyTypes: string[] = [];

  constructor(private layoutService: LayoutService) {}

  ngOnInit(): void {
    this.layoutService.getLayoutConfig().subscribe(config => {
      const layoutItems = config.layoutItems;
      // 批量提取name和type字段到数组
      this.propertyNames = layoutItems.map(item => item.name);
      this.propertyTypes = layoutItems.map(item => item.type);

      // 生成目标Model类
      this.createModelClass('User');
    });
  }

第三步：动态拼接Model类代码 #

接下来写一个方法来生成符合要求的TypeScript类代码，你可以直接复制控制台输出的代码到你的Model文件中：

private createModelClass(className: string): void {
    let modelCode = `export class ${className} {`;
    
    // 遍历数组拼接属性行
    for (let i = 0; i < this.propertyNames.length; i++) {
      modelCode += `\n  ${this.propertyNames[i]}: ${this.propertyTypes[i]};`;
    }
    
    modelCode += '\n}';

    // 输出到控制台
    console.log('生成的Model类代码：');
    console.log(modelCode);
  }
}

运行后控制台会输出你想要的结果：

export class User{ 
  firstname: string;
  middlename: string;
  age: number;
  mobile: number;
}

进阶：编译时自动生成Model文件 #

如果不想每次手动复制代码，可以写一个Node.js脚本，在项目编译前自动生成Model文件：

const fs = require('fs');
const path = require('path');

// 配置文件路径
const jsonFilePath = path.join(__dirname, 'src/assets/layout-config.json');
const modelOutputPath = path.join(__dirname, 'src/app/models/user.model.ts');

// 读取并解析JSON
const layoutConfig = JSON.parse(fs.readFileSync(jsonFilePath, 'utf8'));
const layoutItems = layoutConfig.layoutItems;

// 拼接Model代码
const className = 'User';
let modelCode = `export class ${className} {`;
layoutItems.forEach(item => {
  modelCode += `\n  ${item.name}: ${item.type};`;
});
modelCode += '\n}';

// 写入文件
fs.writeFileSync(modelOutputPath, modelCode);
console.log(`✅ ${modelOutputPath} 已自动生成！`);

把这个脚本保存为generate-model.js，然后在package.json的scripts里添加一行：

"scripts": {
  "prebuild": "node generate-model.js",
  // 其他原有脚本...
}

这样每次执行ng build时，都会自动生成最新的Model文件啦！

内容的提问来源于stack exchange，提问作者Narendar