Question

寻找关于如何制作webservice api url的建议，这些api url目前在我的角度组件/服务中使用appsettings..json magic配置。

Answer 1

您还可以使用environment.ts文件夹中的app/environments文件配置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文件（假设您当然正在使用Angular CLI）

有关如何设置环境文件的更多信息，请阅读以下非常有用的文章Application Settings using the CLI Environment Option

Answer 2

创建包含所有应用设置的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内解析属性 - 无关紧要。您甚至可以执行后端请求并添加getter以从共享源中提取数据...

在TypeScript中引用appsettings

2 个答案: