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 小时前
vue复杂数据类型多层嵌套的监听
前端·javascript·vue.js
我是Superman丶5 小时前
【技巧】前端VUE用中文方法名调用没效果的问题
前端·javascript·vue.js
斯~内克5 小时前
Vue 3 中 watch 的使用与深入理解
前端·javascript·vue.js
lqj_本人8 小时前
鸿蒙OS&UniApp制作多选框与单选框组件#三方框架 #Uniapp
前端·javascript·uni-app
SHIPKING39311 小时前
【HTML】个人博客页面
javascript·css·html
junjun.chen060612 小时前
【在qiankun模式下el-dropdown点击,浏览器报Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not o
前端·javascript·前端框架
課代表12 小时前
AcroForm JavaScript Promise 对象应用示例: 异步加载PDF文件
开发语言·javascript·pdf·promise·对象
zm12 小时前
服务器连接多客户端
java·javascript·算法
小屁孩大帅-杨一凡13 小时前
一个简单点的js的h5页面实现地铁快跑的小游戏
开发语言·前端·javascript·css·html
bing_15814 小时前
Spring MVC 根据请求头 (如 Accept) 怎么返回 JSON 或 XML 数据?
spring·json·mvc