angular 读取json文件

1.src->assets下 新建:conf.json

conf.json文件内容

{
      "sites": {
            "api": "http://10.57.30.200:8092/",
            "java_url":"http://10.58.241.10:7001/flow_system-2021_01_03/",
            "pqc_url": "http://10.57.0.181:8009/pqc/",
            "ad_url":"http://10.57.241.94:8082/",
            "localhost_url":  "http://flow.k8sdev-wok.k8s.wistron.com.cn/#/"
      }
    
}

2.src->core新建config文件夹,新建urls.ts文件

urls.ts文件内容:


import {  Injectable } from '@angular/core';

@Injectable()
export class Urls {
    // 指示书
    public api: string;
    // DCC
    public java_url: string;
    // PQC
    public pqc_url: string;
     // AD认证
    public ad_url: string;
     // 本地路径跳转
    public localhost_url: string;

    constructor() {
        this.api = '';
        this.java_url='';
        this.pqc_url='';
        this.ad_url='';
        this.localhost_url='';
    }

    public setUrls(urlsData:any) {
        urlsData = urlsData || {};
        this.api = urlsData.api || '';
        this.java_url = urlsData.java_url || '';
        this.pqc_url = urlsData.pqc_url || '';
        this.ad_url = urlsData.ad_url || '';
        this.localhost_url = urlsData.localhost_url || '';
    }
}

3.src->app->core->startup->startup.service.ts文件中添加内容

1.引入Urls文件

import { Urls } from './../config/urls';

2.constructor添加

private urls:Urls

3.初始化读取conf文件
load(): Promise<any> {
    // only works with promises
    // https://github.com/angular/angular/issues/15088
    return new Promise(resolve => {
      zip(
        this.httpClient.get(`assets/tmp/i18n/${this.i18n.defaultLang}.json`),
        this.httpClient.get('assets/tmp/app-data.json'),
        /*此处新增*/
        this.httpClient.get('../../../assets/conf.json')
      )
        .pipe(
            /*此处新增config*/
          // 接收其他拦截器后产生的异常消息
          catchError(([langData, appData,config]) => {
            resolve(null);
            return [langData, appData,config];
          }),
        )
        .subscribe(
        /*此处新增config*/
          ([langData, appData,config]) => {
            // setting language data
            this.translate.setTranslation(this.i18n.defaultLang, langData);
            this.translate.setDefaultLang(this.i18n.defaultLang);

            // application data
            const res: any = appData;
            // 应用信息:包括站点名、描述、年份
            this.settingService.setApp(res.app);
       //     console.log(this.settingService.user.name);

            // 用户信息:包括姓名、头像、邮箱地址
            this.settingService.setUser({
              avatar: '../../../assets/tmp/img/user1.png',
              name: this.settingService.user.name,
              password: this.settingService.user.password,
            });
            // ACL:设置权限为全量
            this.aclService.setFull(true);          
            this.menuService.add(res.menu);
            // 设置页面标题的后缀
            this.titleService.default = '';
            this.titleService.suffix = res.app.name;
            /*此处新增*/
            this.urls.setUrls(config.sites)
          },
          () => {},
          () => {
            resolve(null);
          },
        );
    });
  }

4.src->app->app.module.ts中添加

i18nService后面引入
import { Urls } from './core/config/urls';
priovide添加
providers: [Urls]

5.调用

1.导入
import { Urls } from './../../../core/config/urls';
2.constructor添加
constructor(public urls :Urls) { }
3.使用

        this.http.post(this.urls.java_url+'signedStatus/getWriterList?userId='+this.settingService.user.name).subscribe(res=>{
        })

参考博客:https://zhuanlan.zhihu.com/p/33375202

应用中的踩坑记录

#1.
Property 'sites' does not exist on type 'Object'
需要设定接收参数类型:

.subscribe(
        /*设定参数类型为any*/
          ([langData, appData,config]:any) => {
          })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值