Cómo pasar parámetros renderizados desde el backend al método bootstrap angular2

En la versión final de Angular2, el proveedor APP_INITIALIZER se puede usar para lograr lo que desea.

Escribí una idea con un ejemplo completo: https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9

El ejemplo de gist es leer desde archivos JSON, pero se puede cambiar fácilmente para leer desde un punto final REST.

Lo que necesitas es básicamente:

A) Configure APP_INITIALIZER en su archivo de módulo existente:

import { APP_INITIALIZER } from '@angular/core';
import { BackendRequestClass } from './backend.request';
import { HttpModule } from '@angular/http';

...

@NgModule({
    imports: [
        ...
        HttpModule
    ],
    ...
    providers: [
        ...
        ...
        BackendRequestClass,
        { provide: APP_INITIALIZER, useFactory: (config: BackendRequestClass) => () => config.load(), deps: [BackendRequestClass], multi: true }
    ],
    ...
});

Estas líneas llamarán a la carga() método de la clase BackendRequestClass antes de que se inicie su aplicación.

Asegúrese de establecer "HttpModule" en la sección "imports" si desea hacer llamadas http al backend usando angular2 built in library.

B) Cree una clase y nombre el archivo "backend.solicitud.ts":

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class BackendRequestClass {

    private result: Object = null;

    constructor(private http: Http) {

    }

    public getResult() {
        return this.result;
    }

    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('http://address/of/your/backend/endpoint').map( res => res.json() ).catch((error: any):any => {
                reject(false);
                return Observable.throw(error.json().error || 'Server error');
            }).subscribe( (callResult) => {
                this.result = callResult;
                resolve(true);
            });

        });
    }
}

C) Para leer el contenido de la llamada backend, solo necesita inyectar la BackendRequestClass en cualquier clase de su elección y llamar a GetResult(). Ejemplo:

import { BackendRequestClass } from './backend.request';

export class AnyClass {
    constructor(private backendRequest: BackendRequestClass) {
        // note that BackendRequestClass is injected into a private property of AnyClass
    }

    anyMethod() {
        this.backendRequest.getResult(); // This should return the data you want
    }
}

Hágame saber si esto resuelve tu problema.

En lugar de tener su punto de entrada llamando a bootstrap, podría crear y exportar una función que haga el trabajo:

export function doBootstrap(data: any) {
    platformBrowserDynamic([{provide: Params, useValue: new Params(data)}])
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

También puede colocar esta función en el objeto global, dependiendo de su configuración (webpack/SystemJS). También es compatible con AOT.

Esto tiene el beneficio añadido de retrasar el bootstrap, cuando tiene sentido. Por ejemplo, cuando recupera estos datos de usuario como una llamada AJAX después de que el usuario rellene un formulario. Simplemente llame a la función bootstrap exportada con estos datos.

La única manera de hacerlo es proporcionar estos valores al definir sus proveedores:

bootstrap(AppComponent, [
  provide(RequestOptions, { useFactory: () => {
    return new CustomRequestOptions(/* parameters here */);
  });
]);

Entonces puedes usar estos parámetros en tu clase CustomRequestOptions:

export class AppRequestOptions extends BaseRequestOptions {
  constructor(parameters) {
    this.parameters = parameters;
  }
}

Si obtiene estos parámetros de una solicitud AJAX, necesita arrancar asíncronamente de esta manera:

var appProviders = [ HTTP_PROVIDERS ]

var app = platform(BROWSER_PROVIDERS)
  .application([BROWSER_APP_PROVIDERS, appProviders]);

var http = app.injector.get(Http);
http.get('http://.../some path').flatMap((parameters) => {
  return app.bootstrap(appComponentType, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(/* parameters here */);
    }})
  ]);
}).toPromise();

Ver esta pregunta:

• angular2 bootstrap con datos de llamadas ajax

Editar

Dado que tiene sus datos en el HTML, podría usar el siguiente.

Puede importar una función y llamarla con parámetros.

Aquí hay una muestra del módulo principal que arranca su aplicación:

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(params) {
  bootstrap(AppComponent, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(params);
    });
  ]);
}

Entonces puedes importarlo desde tu página principal HTML así:

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

Vea esta pregunta: Pase Valores Constantes a Angular desde _layout.cshtml.