TypeScript中的参考应用程序

Question

寻找建议，了解如何使用appsettings..json magic配置我的角度组件/服务中当前硬编码的webservice api url。

Answer 1

创建包含所有应用程序设置的TS界面。然后为该接口创建令牌。然后提供对象，实现接口...

export interface IAppSettings{ 
    backendUrl: string; 
} 

export const APP_SETTINGS = new InjectionToken<IAppSettings>('IAppSettings'); 

export class AppSettings implements IAppSettings{ 
    backendUrl: string = "http://example.com/"; 
} 

@NgModule({ 
... 
providers: [ 
    {provide: APP_SETTINGS, useClass: AppSettings} //`useClass` doesn't work in AOT??? 
] 
... 
}) 

@Component({}) 
export class MyAwesomeComponent{ 
    constructor(@Inject(APP_SETTING) private appSettings: IAppSettings){ 
    } 
} 

究竟如何解决AppSettings内部的属性 - 无所谓。您甚至可以执行后端请求并添加获取器以从共享源提取数据...

Answer 2

您还可以使用app/environments文件夹中的environment.ts文件来配置Angular应用程序设置。例如

export const environment = { 
    production: false, 
    apiUrl: 'http://localhost:54162/' 
}; 

您可以通过导入

import { environment } from './../../../environments/environment'; 

使用您的服务设置，然后通过执行类似

this.ApiUrl = environment.apiUrl; 

访问设置另外请注意，你可以设置环境文件对于不同的版本，environment.prod.ts

export const environment = { 
    production: true, 
    apiUrl: 'http://[some production url]:54162/' 
}; 

默认ng build command将利用environment.ts文件（使您使用过程中的角CLI假设）

欲了解更多有关如何设置环境文件，阅读下面的非常有用的文章Application Settings using the CLI Environment Option