Angular2:将服务器端配置注入服务 [英] Angular2: inject server side config into service

问题描述

我将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:将服务器端配置注入服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！