Angular解析本地json文件

说明:

效果图:

step1:E:\projectgood\ajnine\untitled4\public\config\config.json

bash 复制代码
{
    "calcServerURL": "http://localhost:3000"
}

step2:E:\projectgood\ajnine\untitled4\src\app\orance\orance.component.ts

typescript 复制代码
import {Component, OnInit} from '@angular/core';
import axios from "axios";

@Component({
  selector: 'app-orance',
  standalone: true,
  imports: [],
  templateUrl: './orance.component.html',
  styleUrl: './orance.component.css'
})
export class OranceComponent implements OnInit{

  ngOnInit(): void {
    var name="zhangfeo"
    console.log(name)

    getRuntimeConfig().then(resule=>{
      console.log(resule)
      console.log(resule.calcServerURL)
    })
  }
}

const getRuntimeConfig = async () => {
  const res = await axios.get("/config/config.json");
  const { data } = await res;
  return data;
};

step3:E:\projectgood\ajnine\untitled4\package.json

bash 复制代码
 "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/material": "^18.2.10",
    "axios": "^0.19.0",
  },

end

相关推荐
前端大白话1 分钟前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
前端大白话3 分钟前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
前端大白话7 分钟前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
谦谦橘子9 分钟前
手写react-router,理解react-router原理
前端·javascript·react.js
zhu_zhu_xia18 分钟前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
BillKu21 分钟前
Vue3父子组件数据同步方法
前端·javascript·vue.js
七月丶44 分钟前
❌ 别再用接口文档开发了!我改用“Mock-First”后爽到飞起
前端·javascript·后端
七月丶1 小时前
🗑 写了 2000 行代码,结果自己全删了。
前端·javascript·后端
江城开朗的豌豆1 小时前
JavaScript篇:遍历数组:for循环与forEach的本质区别与实战选择
前端·javascript·面试
生命猿于运动1 小时前
Trae使用体验
前端·javascript·vue.js