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