Gewusst wie: übergeben von Parametern gerendert aus backend zu angular2 bootstrap-Methode

update2

Plunker Beispiel

update AoT

Arbeiten mit AoT die Fabrik Schließung muss verschoben werden, aus

function loadContext(context: ContextService) {
  return () => context.load();
}

@NgModule({
  ...
  providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: loadContext, deps: [ContextService], multi: true } ],

Siehe auch https://github.com/angular/angular/issues/11262

update ein RC.6 und 2.0.0 Letzte Beispiel

function configServiceFactory (config: ConfigService) {
  return () => config.load();
}

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,
        routes,
        FormsModule,
        HttpModule],
    providers: [AuthService,
        Title,
        appRoutingProviders,
        ConfigService,
        { provide: APP_INITIALIZER,
          useFactory: configServiceFactory
          deps: [ConfigService], 
          multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Wenn es keine Notwendigkeit zu warten, bis die Initialisierung abgeschlossen, wird der Konstruktor von `class AppModule {} kann auch verwendet werden:

class AppModule {
  constructor(/*inject required dependencies */) {...} 
}

Hinweis (zyklische Abhängigkeit)

Beispielsweise die Injektion der router kann die Ursache für zyklische Abhängigkeiten.
Zu umgehen, injizieren die Injector bekommen und die Abhängigkeit von

this.myDep = injector.get(MyDependency);

statt Injektion MyDependency direkt wie:

@Injectable()
export class ConfigService {
  private router:Router;
  constructor(/*private router:Router*/ injector:Injector) {
    setTimeout(() => this.router = injector.get(Router));
  }
}

update

Diese sollte die gleiche Arbeit in der RC.5, aber stattdessen fügen Sie den Anbieter, um providers: [...] des root-Modul statt bootstrap(...)

(selber noch nicht getestet).

update

Einen interessanten Ansatz, es zu tun, ganz im inneren Winkel-hier wird erklärt, https://github.com/angular/angular/issues/9047#issuecomment-224075188

Können Sie APP_INITIALIZER die eine Funktion ausführen, wenn die
app initialisiert wird und die Verzögerung, was es bietet, wenn die Funktion zurückgibt,
ein Versprechen. Dies bedeutet, dass die app initialisieren, ohne ganz so
viel Wartezeit und Sie können auch die vorhandenen Dienste und framework
features.

Als ein Beispiel angenommen, Sie haben ein multi-gepachtete Lösung, bei der der
site-info basiert auf dem domain-name-es ist serviert wird. Dies kann
[name].letterpress.com oder eine benutzerdefinierte Domäne, die abgestimmt ist auf die
voller hostname. Wir können die Tatsache verbergen, dass diese hinter einem Versprechen durch
mit APP_INITIALIZER.

In der bootstrap Datei:

{provide: APP_INITIALIZER, useFactory: (sites:SitesService) => () => sites.load(), deps:[SitesService, HTTP_PROVIDERS], multi: true}),

Seiten.service.ts:

@Injectable()
export class SitesService {
  public current:Site;

  constructor(private http:Http, private config:Config) { }

  load():Promise<Site> {
    var url:string;
    var pos = location.hostname.lastIndexOf(this.config.rootDomain);
    var url = (pos === -1)
      ? this.config.apiEndpoint + '/sites?host=' + location.hostname
      : this.config.apiEndpoint + '/sites/' + location.hostname.substr(0, pos);
    var promise = this.http.get(url).map(res => res.json()).toPromise();
    promise.then(site => this.current = site);
    return promise;
  }

HINWEIS: config ist nur eine benutzerdefinierte config-Klasse. rootDomain wäre
'.letterpress.com' für dieses Beispiel und würde zulassen, dass Dinge wie
aptaincodeman.letterpress.com.

Alle Komponenten und andere Dienste können nun Site injiziert
und die .current Eigenschaft, die ein konkretes
aufgefüllt Objekt mit keine Notwendigkeit zu warten, auf irgendein Versprechen in der app.

Dieser Ansatz schien schneiden Sie die startup-Latenz, die war anders
ziemlich Auffällig, wenn Sie warteten, dass der große Winkel-bundle
laden und dann ein anderes http-Anforderung, bevor der bootstrap auch begann.

original

Können Sie es mit Angulars dependency injection:

var headers = ... //get the headers from the server

bootstrap(AppComponent, [{provide: 'headers', useValue: headers})]);

class SomeComponentOrService {
   constructor(@Inject('headers') private headers) {}
}

oder bieten Sie vorbereitet BaseRequestOptions direkt wie

class MyRequestOptions extends BaseRequestOptions {
  constructor (private headers) {
    super();
  }
} 

var values = ... //get the headers from the server
var headers = new MyRequestOptions(values);

bootstrap(AppComponent, [{provide: BaseRequestOptions, useValue: headers})]);

InformationsquelleAutor Günter Zöchbauer

Anstatt Ihre Einstiegspunkt den Aufruf von bootstrap selbst erstellen könnte und eine Funktion exportieren, die die Arbeit macht:

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

Könnten Sie auch diese Funktion auf das Globale Objekt, je nach Einstellung (webpack/SystemJS). Es ist auch AOT-kompatibel.

Dies hat den Vorteil, zu verzögern, die bootstrap, die whenit Sinn macht. Zum Beispiel, wenn Sie diesen Benutzer abrufen von Daten als ein AJAX-Aufruf, nachdem der Benutzer füllt ein Formular aus. Rufen Sie die exportierte bootstrap-Funktion mit diesen Daten.

InformationsquelleAutor André Werlang