问题描述
我将Angular 2.0.0与TypeScript一起使用在ASP.NET Core中.我的目标是基于服务器端变量在我的应用程序中创建AppConfig服务.在其他几个答案的帮助下,我能够创建以下代码:
I'm using Angular 2.0.0 with TypeScript in ASP.NET Core. My goal is to create AppConfig service in my app, based on server-side variables. With a help from few other answers, I was able to create following code:
Index.cshtml
<app>
<i class="fa fa-spin fa-5x fa-spinner"></i>
</app>
<script>
System.import('/app/main').then((m) => {
var config = {
apiUrl: @options.ApiServerUrl
};
m.RunApplication(config);
}, console.error.bind(console));
</script>
app.config.ts
import { Injectable } from "@angular/core";
@Injectable()
export class AppConfig {
apiUrl: string;
}
main.ts
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
import { AppConfig } from "./app.config";
export function RunApplication(config: Object) {
var appConfig = new AppConfig();
appConfig.apiUrl = config["apiUrl"];
console.log('Created config: ', appConfig);
platformBrowserDynamic()
.bootstrapModule(AppModule, [{ providers: [{ provide: AppConfig, useValue: appConfig }] }])
.catch(err => console.error(err));
}
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http";
import { AppRouting, AppRoutingProviders } from "./app.routes";
import { AppConfig } from "./app.config";
import { AppComponent } from "./app.component";
import { DashboardComponent } from "./dashboard/dashboard.component";
import { DashboardService } from "./dashboard/dashboard.service";
@NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule,
HttpModule,
AppRouting
],
providers: [
AppRoutingProviders,
AppConfig,
DashboardService
],
bootstrap: [AppComponent],
})
export class AppModule { }
dashboard.service.ts
import { Http } from "@angular/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";
import "rxjs/add/operator/map";
import { AppConfig } from "../app.config";
@Injectable()
export class DashboardService {
constructor(private appConfig: AppConfig, private http: Http) {
console.log('Injected config: ', appConfig);
console.log('Injected apiUrl: ', appConfig.apiUrl);
}
}
Chrome控制台的支出
由于某些原因,创建和注入的AppConfig
不相同,并且apiUrl
值未出现在DashboardService
中.我怀疑错误在这里:
As you can see for some reason created and injected AppConfig
are not the same, and apiUrl
value does not appear in DashboardService
. I suspect that error is somewhere in here:
bootstrapModule(AppModule, [{ providers: [{ provide: AppConfig, useValue: appConfig }] }])
但是我对Angular2还是很陌生,不知道如何解决它.你能指出问题出在哪里吗?
but I'm quite new to Angular2 and don't know how to fix it. Can you point me where the problem is?
推荐答案
您在@NgModule()
中的AppConfig
提供程序遮盖了传递给bootstrapModule()
Your AppConfig
provider in @NgModule()
shadows the provider passed to bootstrapModule()
使用如何传递从后端访问angular2引导程序方法,您应该会得到所需的内容.
With How to pass parameters rendered from backend to angular2 bootstrap method you should get what you want.
这篇关于Angular2:将服务器端配置注入服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!