Question

我有MVC + Angular 5应用程序和一些在web.config中定义的应用程序键。我可以使用以下代码访问Index.cshtml文件中的键：

<script type="text/javascript">
    var webConfigKeyValues = new Object();
    webConfigKeyValues = @Html.Raw(Json.Encode(ViewBag.WebConfigKeyValues));
</script>

<app-root></app-root>

我的Angular 5应用包含多个功能模块。如何访问所有功能模块，组件和服务中的webConfigKeyValues

Answer 1

那是不可能的。 Angular是一个客户端框架，无法从浏览器访问web.config。

另一方面，您可以在MVC中创建一些用户控件，并将其添加到每个cshtml文件中。

Answer 2

作为我对此post的回答的替代方案，其中描述了如何直接或通过decorator来引用全局变量，也可以使用InjectionToken来获取传递给JavaScript范围的值。（Demo）

您可以按以下方式定义令牌

export const MY_WEBCONFIG_TOKEN = new InjectionToken<any>('Data from cshtml',   
{
    providedIn: 'root',
    factory: () => window["webConfigKeyValues"]
});

然后Inject将该令牌放入依赖于该数据的components和services中。

@Component({
    ...
})
export class AppComponent {
    constructor(
        @Inject(MY_WEBCONFIG_TOKEN) private token: any
    ) { }
}

编辑

对于Angular版本 5.x ，您需要使用ValueProvider（Docs）将值分配给InjectionToken。

export const MY_WEBCONFIG_TOKEN = new InjectionToken<any>('Data from cshtml',);

*。module.ts

@NgModule({
    ...
    providers: [
        { provide: MY_WEBCONFIG_TOKEN, useValue: window["webConfigKeyValues"] }
    ]
    ...
}})
export class MyModule { }

所有组件和服务如何访问MVC + Angular5项目的web.config中定义的Web.Config密钥

2 个答案: