Angular客户端如何读取外部appsettings.json中的链接配置

1. 配置自动复制外部文件到输出目录 #

Angular运行时只能访问打包后dist目录里的文件，所以得先把外部的AppWeb.appsettings.json复制到项目输出目录。修改angular.json文件，找到architect -> build -> options下的assets数组，添加以下配置：

{
  "glob": "AppWeb.appsettings.json",
  "input": "../../",
  "output": "./"
}

这里的input是相对于Angular项目根目录（AppWeb/ClientApp）的路径，指向外部配置文件所在的AppWeb根目录。

2. 写一个配置服务来读取文件 #

在Angular项目里创建一个config.service.ts服务，用来加载和获取配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  private configData: any;

  constructor(private http: HttpClient) {}

  loadConfig(): Observable<any> {
    return this.http.get('./AppWeb.appsettings.json').pipe(
      data => {
        this.configData = data;
        return data;
      }
    );
  }

  getLink(linkKey: string): string {
    return this.configData?.ImportantLinks?.[linkKey] || '';
  }
}

3. 启动时预加载配置 #

确保配置在应用初始化前加载完成，修改app.module.ts：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ConfigService } from './config.service';

export function initApp(configService: ConfigService) {
  return () => configService.loadConfig().toPromise();
}

@NgModule({
  // 其他模块、组件配置
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

4. 在组件里使用配置链接 #

在需要用链接的组件中注入ConfigService，获取链接后使用：

import { Component, OnInit } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  uefaUrl: string;

  constructor(private configService: ConfigService) {}

  ngOnInit(): void {
    this.uefaUrl = this.configService.getLink('UrlOne');
  }
}

模板里直接绑定使用：

<a [href]="uefaUrl" target="_blank">打开UEFA官网</a>

内容的提问来源于stack exchange，提问作者chivas