当前位置: 首页 > article >正文

Angular解析本地json文件

说明:
效果图:
在这里插入图片描述

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

{
    "calcServerURL": "http://localhost:3000"
}

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

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

 "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/material": "^18.2.10",
    "axios": "^0.19.0",
  },

end


http://www.kler.cn/a/380785.html

相关文章:

  • [Android]按下扫描键时启动一个线程来执行某些操作
  • 分别查询 user 表中 avatar 和 nickname 列为空的用户数量
  • 14-zookeeper环境搭建
  • v3s点RGB屏 40pin 800x480,不一样的点屏,不通过chosen。
  • Linux 常见用例汇总
  • Zabbix6.0升级为7.2
  • [mysql]修改表和课后练习
  • How to initiate a conversation with a stranger?
  • 【Mysql 深入探索】InnoDB 实现事务的机制
  • qt QColor详解
  • 海报在线制作系统
  • MySQL-如果你在添加外键时忘加约束名,如何找到系统默认的约束名
  • 默认路由:实现内网所有网段流量走一条默认路由访问外网
  • redis:String字符串命令和内部编码
  • 教育机构如何利用知识中台进行数字教学
  • 第二十八章 Vue之自定义指令
  • go的template示例
  • pdf 添加页眉页脚,获取前五页
  • JavaScript、ES6 高频重点面试题
  • 【开源免费】基于SpringBoot+Vue.JS大学生就业招聘系统(JAVA毕业设计)
  • JS装备智能化储备管理体系优化改革
  • AS技术探索
  • 设计模式之结构型模式---装饰器模式
  • ubuntu22.04 docker-compose搭建apisix高可用
  • Spring框架的事务管理
  • 868历年真题算法设计题+程序设计题