asp.net mvc - Pasar parámetros del servidor asp.net a la aplicación Angular 2
asp.net-mvc asp.net-web-api (3)
================================================== ==============
EDITAR: SOLUCIÓN Después de actualizar a 2.0 Final - Pasar parámetros del servidor a ngModule después de la actualización RC5
================================================== ================
¿Alguna forma de pasar los parámetros del servidor a una aplicación Angular 2?
es decir, me gustaría usar el objeto MVC "HttpContext.User.Identity.Name" y tenerlo inyectable en cualquier parte de mi aplicación angular 2.
En angular 1 esto fue posible usando ng ".constant" y serializando objetos .Net a JSON en index.cshtml.
Parece que hay una manera de pasar los parámetros, pero esto no funciona con el código .Net. Definir constantes globales en 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>
SOLUCIÓN FINAL: (muchas gracias a Thierry)
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
]);
}
Uso:
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) {
}
}
Con un servidor .NET Core, recomiendo usar un
IOptions<>
y un
ViewComponent
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddOptions();
services.Configure<Models.EnvironmentSettings>(Configuration.GetSection("client"));
services.Configure<Models.EnvironmentSettings>(options =>
{
options.OtherSetting = "Other";
});
services.AddMvc();
}
Models / EnvironmentSettings.cs
public class EnvironmentSettings
{
public string OtherSetting { get; set; }
public string LoginUrl { get; set; }
}
appsettings.json
{
"client": {
"LoginUrl": "http://localhost:45290/Token"
}
}
Controladores / Componentes / BootstrapViewComponent.cs
public class BootstrapViewComponent : ViewComponent
{
private IOptions<EnvironmentSettings> environmentSettings;
public BootstrapViewComponent(
IOptions<EnvironmentSettings> environmentSettings
)
{
this.environmentSettings = environmentSettings;
}
public async Task<IViewComponentResult> InvokeAsync()
{
return View(environmentSettings.Value);
}
}
Vistas / Compartido / Componentes / Bootstrap / Default.cshtml
@model YourApp.Models.EnvironmentSettings
<script>
System.import(''app'')
.then(function (module) {
module.main({
other: "@Model.OtherSetting",
loginUrl: "@Model.LoginUrl"
})
})
.catch(function (err) {
console.error(err);
});
</script>
Vistas / Compartido / _Layout.cshtml
<head>
...
@await Component.InvokeAsync("Bootstrap")
</head>
main.ts
export function main(settings: any) {
platformBrowserDynamic([{ provide: ''EnvironmentSettings'', useValue: settings }]).bootstrapModule(AppModule);
}
Una opción sería agregar un método en el módulo que importe. Entonces puede llamarlo para proporcionar el objeto que desea.
Aquí hay una muestra de la
app/main
módulo
app/main
:
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 })
]);
}
Luego puede importarlo desde su página principal HTML de esta manera:
<script>
System.import(''app/main'').then((module) => {
module.main({
userIdentityName: ''something from asp.net''
});
});
</script>
Actualizar
Con las últimas versiones de Angular, debe aprovechar los módulos de esta manera:
export const USER_IDENTITY_NAME_TOKEN =
new InjectionToken(''userIdentityName'');
@NgModule({
(...)
providers: [
{
provide: USER_IDENTITY_NAME_TOKEN,
useValue: userIdentityName
}
]
})
export class MainModule() { }
gracias por la información, para aquellos que usan platformBrowserDynamic para arrancar:
main.ts:
//platformBrowserDynamic().bootstrapModule(asstModule);
export function main(appSettings: any) {
platformBrowserDynamic([{ provide: ''AppSettings'', useValue: appSettings }]).bootstrapModule(asstModule);
}