zoukankan      html  css  js  c++  java
  • angular 构建可以动态挂载的配置服务

    angular 构建可以动态挂载的配置服务

    Intro

    angular 中可以指定 environment 来区分不同环境下的配置,然而 environment 中的配置会在打包时是固定的,想要像挂载 asp.net core 里的 appsettings.json 的配置文件一样挂载 environment 是做不到的,想要读取系统的环境变量也是行不通的。

    有时候希望能够动态指定一些配置,运行 docker 容器的时候挂载一个配置文件来实现动态配置

    实现方案

    通过一个 config.js 的配置文件,将配置信息写入 window 对象的属性中,配置信息从 window 对象中读取,

    这样就可以动态挂载配置文件了。

    实现细节

    实现 ConfigService

    import { environment } from "../../environments/environment";
    import { Injectable } from '@angular/core';
    
    @Injectable({
        providedIn: 'root'
    })
    export class ConfigService {
    
        public GetApiBaseUrl(): string {
            if (window["__env"] && window["__env"]["ApiBaseUrl"]) {           
                return <string>window["__env"]["ApiBaseUrl"];
            }
            return environment.apiBaseUrl;
        }
    }
    

    config.js 示例:

    var env = {
        ApiBaseUrl: "https://reservation.weihanli.xyz"
    };
    window["__env"]= env;
    

    index.html 中引入 config.js 文件

    <script src="assets/config.js"></script>
    

    使用 ConfigService 示例:

    import { ConfigService } from './ConfigService';
    
    export class BaseService<TModel>{
      protected readonly apiBaseUrl;
    
      constructor(config: ConfigService){
        this.apiBaseUrl = config.GetApiBaseUrl();
      }
    }
    

    Docker 挂载

    docker run -d -p 9000:80 --name=reservation-client -v $(pwd)/assets/config.js:/usr/share/nginx/html/assets/config.js weihanli/reservation-client:latest # 挂载配置文件
    

    sample config.js:

    var env = {
        ApiBaseUrl: "https://reservation.weihanli.top"
    };
    window["__env"]= env;
    

    容器启动成功之后,访问 http://localhost:9000 即可,监控 HTTP 请求

    可以看到实际请求的地址已经变成了挂载的配置文件里的地址了

    Reference

  • 相关阅读:
    AxAssist安装说明
    回调方法
    Export to Excel/Word COMInterface
    Using Timer
    转英文 TotalEng
    设置报表的 条形码 Barcode 字体 生产参数
    Silverlight5.0新特性一览
    Silverlight地理地质信息系统
    微软台湾发布Silverlight的卡通形象MM——藍澤光
    微软Silverlight4与Adobe Flex4打成平手,SL与FLEX技术全面对比
  • 原文地址:https://www.cnblogs.com/weihanli/p/12234002.html
Copyright © 2011-2022 走看看