将 asp.net 服务器参数传递给 Angular 2 应用程序 [英] Passing asp.net server parameters to Angular 2 app
问题描述
================================================================
================================================================
解决方案升级到 2.0 Final - 将服务器参数传递给RC5 升级后的 ngModule
EDIT : SOLUTION After upgrading to 2.0 Final - Passing server parameters to ngModule after RC5 upgrade
==================================================================
==================================================================
有什么方法可以将服务器参数传递给 Angular 2 应用程序?
Any way to have server parameters passed to an Angular 2 application?
即我想使用 MVC 对象HttpContext.User.Identity.Name"并将其注入我的 angular 2 应用程序中的任何位置.
i.e. I would like to use the MVC object "HttpContext.User.Identity.Name" and have it injectable anywhere in my angular 2 app.
在 angular 1 中,这可以使用 ng ".constant" 并将 .Net 对象序列化为 index.cshtml 中的 JSON.
In angular 1 this was possible using ng ".constant" and serializing .Net objects to JSON in index.cshtml.
看起来有一种方法可以传递参数,但这不适用于 .Net 代码.在 Angular 2 中定义全局常量
Looks like there's a way to pass params but this doesn't work with .Net code. Define global constants in Angular 2
//HTML - Bootstrapping
<script>
System.import('app/main').then(null, console.error.bind(console));
//I WOULD LIKE TO PASS SOME PARAMS TO APP/MAIN HERE
</script>
最终解决方案:(非常感谢蒂埃里)
FINAL SOLUTION: (big thanks to Thierry)
index.cshtml:
index.cshtml:
<script>
System.import('app/main').then(
module =>
module.main(
{
name: '@User.Identity.Name',
isAuthenticated: User.Identity.IsAuthenticated.ToString().ToLowerInvariant(),
}
),
console.error.bind(console)
);
</script>
main.ts:
...
import {provide} from '@angular/core';
...
export function main(params) {
bootstrap(AppComponent,
[
provide('Name', { useValue: params.name }),
provide('IsAuthenticated', { useValue: params.isAuthenticated }),
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
LoggerService,
AuthenticationService
]);
}
用法:
import {Component, Injectable, Inject} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector: 'navbar',
templateUrl: 'app/components/header/navbar.html',
directives: [ROUTER_DIRECTIVES]
})
export class SomeComponent {
constructor(@Inject('Name') public username: string) {
}
}
推荐答案
一个选项是在您导入的模块中添加一个方法.所以你可以调用它来提供你想要的对象.
An option would be to add a method in the module you import. So you can then call it to provide the object you want.
以下是 app/main
模块的示例:
Here is a sample of the app/main
module:
import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';
export function main(params) {
let userIdentityName = params.name; // for example
bootstrap(AppComponent, [
provide('userIdentityName', { useValue: userIdentityName })
]);
}
然后你可以像这样从你的 HTML 主页中导入它:
Then you can import it from your HTML main page like this:
<script>
System.import('app/main').then((module) => {
module.main({
userIdentityName: 'something from asp.net'
});
});
</script>
更新
使用最新版本的 Angular,您需要以这种方式利用模块:
With latest versions of Angular, you need to leverage modules this way:
export const USER_IDENTITY_NAME_TOKEN =
new InjectionToken('userIdentityName');
@NgModule({
(...)
providers: [
{
provide: USER_IDENTITY_NAME_TOKEN,
useValue: userIdentityName
}
]
})
export class MainModule() { }
这篇关于将 asp.net 服务器参数传递给 Angular 2 应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!