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

相关推荐
yqcoder37 分钟前
electron 中 ipcRenderer 作用
前端·javascript·electron
zls3653651 小时前
C# WPF 与 JS 交互可以使用的第三方库
开发语言·javascript·c#·wpf·交互
没资格抱怨1 小时前
Javascript属性遮蔽问题
javascript·ecmascript
MicrosoftReactor1 小时前
技术速递|.NET 9 中 System.Text.Json 的新增功能
ui·json·.net
Liquor14193 小时前
JavaScript知识点梳理及案例实践
开发语言·前端·javascript·python·css3·html5·js
hummhumm6 小时前
Oracle 第22章:数据仓库与OLAP
java·javascript·后端·python·sql·mysql·database
天天进步20157 小时前
X2JS: XML与JSON的完美转换工具
xml·json
334554329 小时前
element表格双击修改时间
开发语言·前端·javascript
勘察加熊人9 小时前
andrular输入框input监听值传递
angular.js
沈询-阿里10 小时前
spring ai 入门 之 结构化输出 - 把大模型llm返回的内容转换成java bean
前端·javascript·easyui