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

时间:2018-11-13 09:07:30

标签: asp.net-mvc angular angular-services

我是Angular2的新手,并且有一些疑问。

我有一项可以从Web API请求一些JSON数据的服务:

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中读取一个设置,该设置可以在启动时用于生产服务器和localhost服务器的操作URL。

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

2 个答案:

答案 0 :(得分:1)

您可以使用https://docs.microsoft.com/en-us/xamarin/ios/deploy-test/app-distribution/ipa-support?tabs=windows

来实现

在每个请求中添加 Angular Http Intercepter 前缀。

示例代码:

在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:

您可以在environment.xx.ts下的/src/environments中定义它

然后在angular.json中定义构建配置

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

当您构建应用时,

只需添加配置

 ng build   --configuration=api

祝你好运!

答案 1 :(得分:1)

我能想到的两个选择:

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';
}