Angular解析本地json文件

勘察加熊人

于 2024-11-04 17:14:49 发布

阅读量673

点赞数 3

CC 4.0 BY-SA版权

分类专栏： typescript 文章标签： angular.js json javascript

本文链接：https://blog.csdn.net/cf8833/article/details/143489285

typescript 专栏收录该内容

204 篇文章

订阅专栏

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

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