从 Angular 服务中的 .NET appSettings.json 文件读取环境变量？

Question

我有一项服务需要来自网络的一些 JSON 数据 API:

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

@Injectable()
export class ReviewService {
    private actionUrl: string;

    constructor(private _http: Http) {
        this.actionUrl = 'http://api.dc-shop.com/review';
    }

    public GetAll = (): any => {
        return this._http.get(this.actionUrl)
            .map(x => x.json());
    }
}

我想避免在构造函数中对 API 地址进行硬编码，而是从 appSettings.json 中读取一个设置，我可以在启动生产时将其用于操作 URL 和本地主机服务器。

在 ASP.NET MVC Core 中执行此操作的最佳方法是什么？

Answer 1

您可以使用 Angular Http Intercepter

来实现

在每个请求中添加http://api.dc-shop.com前缀。

示例代码：

在您的 Angular 应用程序中编写一个请求拦截器：

@Injectable()
export class RequestInterceptor implements HttpInterceptor {

 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let req_url = req.url
    req.clone({url:`http://api.dc-shop.com/${req_url}`})
    return next.handle(req);
    }


}

在您的主模块中：

   export const httpInterceptorProviders = [
      {provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true},
    } 

   @NgModule({
       providers: [...,httpInterceptorProviders]
    })

如果你想在不同的环境中配置你的前缀url：

您可以在 /src/environments

下的 environment.xx.ts 中定义它

并在 angular.json

中定义构建配置

 ....
 "configurations": {
   "api": {
    ....
       "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.api.ts"
            }
          ]
     }
   ....
 }
 ...

当您构建应用程序时，

只需添加配置

 ng build   --configuration=api

祝你好运！

Answer 2

我能想到的两个方案：

1) 将配置放在 environment.ts 和 appSettings.json 中 - angular.

内置了访问权限

2) 您的服务的第 1 步使用直接 http.get 加载 appSettings.json，然后使用其中的配置加载所需的数据。

environment.ts的例子

export const environment = {
    apiUrl: 'http://api.dc-shop.com',
    mode: 'prod'
};

用法示例：

import { environment } from './environment';    
constructor(private _http: Http) {
    this.actionUrl = environment.apiUrl + '/review';
}

从 Angular 服务中的 .NET appSettings.json 文件读取环境变量？

Read an environment variable from a .NET appSettings.json file in an Angular service?

asp.net-mvc

angular-services

angular