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

相关推荐
夏幻灵3 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
三天不学习4 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194055 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
小宋102110 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
大包子10 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
lerhxx11 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
Mahut11 小时前
我在 Mac 上做了个本地剪辑器
javascript·架构·产品
汉堡大王952711 小时前
GPT-6 上线 48 小时,我扒开了 Intelligent UI 的运行机制:DIL、沙箱 Worker 和一个 React 式协调器
前端·javascript·后端
hai_android11 小时前
Chat 聊天模块功能总结
前端·javascript·vue.js
创世虚拟世界12 小时前
我做了一个 3D 虚拟世界基底,基于这个再做 3D 虚拟世界或者元宇宙,会事半功倍
javascript·人工智能·3d·gitee·虚拟现实