Suche…


Einführung

In diesem Beitrag werde ich zeigen, wie externe Daten an die Angular-App übergeben werden, bevor die App bootstraps. Diese externen Daten können Konfigurationsdaten, Altdaten, Server-Rendering usw. sein.

Über Abhängigkeitsinjektion

Packen Sie den Bootstrap-Code nicht direkt in den Angular-Bootstrap-Code, sondern in eine Funktion und exportieren Sie die Funktion. Diese Funktion kann auch Parameter akzeptieren.

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./src/app";
export function runAngular2App(legacyModel: any) {
       platformBrowserDynamic([
           { provide: "legacyModel", useValue: model }
       ]).bootstrapModule(AppModule)
       .then(success => console.log("Ng2 Bootstrap success"))
       .catch(err => console.error(err));
}

Dann können wir in beliebige Dienste oder Komponenten das "Legacy-Modell" einfügen und darauf zugreifen.

import { Injectable } from "@angular/core";
@Injectable()
export class MyService {
   constructor(@Inject("legacyModel") private legacyModel) {
      console.log("Legacy data — ", legacyModel);
    }
 }

Fordern Sie die App an und führen Sie sie aus.

require(["myAngular2App"], function(app) {
   app.runAngular2App(legacyModel); // Input to your APP
});


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow