如何在Angular4中从appsettings.json读取键值到TypeScript文件

我来帮你搞定Angular 4里读取appsettings.json的问题，其实步骤很清晰，我一步步给你讲：

1. 放置配置文件 #

首先把你的appsettings.json放到src/assets目录下——Angular的构建工具默认会把这个目录下的文件打包到最终产物里，确保配置文件能被访问到。

你的配置文件内容可以直接用：

{
  "Logging": {
    "IncludeScopes": false,
    "Debug": {
      "LogLevel": {
        "Default": "Warning"
      }
    },
    "Console": {
      "LogLevel": {
        "Default": "Warning"
      }
    }
  },
  "Application": {
    "ServiceUrl": "http://localhost:12345",
    "BaseURL": ""
  }
}

2. 创建配置服务 #

我们需要一个专门的服务来加载和管理配置，这样可以在整个应用里复用。先通过Angular CLI生成服务：

ng generate service app-config

然后修改app-config.service.ts的内容：
先定义一个接口来对应配置的结构（让TypeScript类型检查更友好），再实现加载配置的逻辑：

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

// 定义配置对应的接口
export interface AppSettings {
  Logging: {
    IncludeScopes: boolean;
    Debug: { LogLevel: { Default: string } };
    Console: { LogLevel: { Default: string } };
  };
  Application: {
    ServiceUrl: string;
    BaseURL: string;
  };
}

@Injectable()
export class AppConfigService {
  private appSettings: AppSettings;

  constructor(private http: HttpClient) { }

  // 加载配置文件的方法
  load(): Observable<AppSettings> {
    return this.http.get<AppSettings>('/assets/appsettings.json')
      .map(settings => {
        this.appSettings = settings;
        return settings;
      });
  }

  // 提供获取配置的只读属性
  get settings(): AppSettings {
    return this.appSettings;
  }
}

3. 提前加载配置 #

为了确保应用启动时配置就已经加载完成，我们需要用Angular的APP_INITIALIZER来初始化这个服务。修改app.module.ts：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 别忘了导入HttpClientModule
import { AppComponent } from './app.component';
import { AppConfigService } from './app-config.service';

// 初始化函数，确保配置加载完成后再启动应用
export function initializeApp(appConfigService: AppConfigService) {
  return () => appConfigService.load();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfigService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 在组件中使用配置 #

现在你可以在任何组件里注入AppConfigService，直接获取配置值了。比如在app.component.ts里：

import { Component } from '@angular/core';
import { AppConfigService } from './app-config.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>应用配置信息</h1>
    <p>服务地址：{{ appConfig.settings.Application.ServiceUrl }}</p>
    <p>控制台日志级别：{{ appConfig.settings.Logging.Console.LogLevel.Default }}</p>
  `
})
export class AppComponent {
  constructor(public appConfig: AppConfigService) { }
}

注意事项 #

• 如果你用的是Angular 4早期版本（还在使用Http而不是HttpClient），需要把HttpClient换成Http，并修改加载逻辑为：

  import { Http } from '@angular/http';
  // ...
  load(): Observable<AppSettings> {
    return this.http.get('/assets/appsettings.json')
      .map(res => res.json())
      .map(settings => {
        this.appSettings = settings;
        return settings;
      });
  }
  

  同时要导入HttpModule代替HttpClientModule。
• 确保配置文件的路径正确，Angular开发服务器的根目录对应src，所以/assets/appsettings.json是正确的访问路径。

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