Resolve gesamte Anwendung Angular 2

Question

Ich habe eine Anwendung mit einer einfachen Hauptvorlage mit einem Header und einer Fußzeile, wie so

<section style="margin-bottom:70px"> 
    <nav-menu></nav-menu> 
</section> 
<section> 
    <router-outlet></router-outlet> 
</section> 
<section> 
    <foot></foot> 
</section> 

Der Router Ausgang Resolver auf mich von der Benutzeroberfläche zu stoppen, bis ein Api Anruf paining ist komplett. Dies führt dazu, dass die Benutzeroberfläche nur die Kopf- und Fußzeile anzeigt, bis die API zurückkommt. Gibt es auch noch eine Lösung für die anderen Komponenten? Vielleicht wie ein gemeinsamer Dienst, den die anderen Komponenten abonnieren?

Answer 1

Es gibt mehr Möglichkeiten, dies zu nähern:

1) Sie einen Dienst mit einer loaded oder ähnlicher Flagge bauen könnte, die von dem Resolver eingestellt ist. Fügen Sie dann einen *ngIf zu den anderen Komponenten hinzu, die verhindern, dass sie angezeigt werden, bis das Flag loaded gesetzt ist.

2) Erstellen Sie eine Interim-Komponente mit einem einzigen Router-Ausgang. Verschieben Sie den Code, den Sie derzeit haben, in eine untergeordnete Route dieses Interim-Router-Ausgangs. Dann könnten Sie den Resolver auf diese untergeordnete Route setzen.

app.component.html

<router-outlet></router-outlet> 

main.component.html

<section style="margin-bottom:70px"> 
    <nav-menu></nav-menu> 
</section> 
<section> 
    <router-outlet></router-outlet> 
</section> 
<section> 
    <foot></foot> 
</section> 

Die Routenkonfiguration eine Route zu der Hauptkomponente definieren würde, und es würde die Route Resolver sein. Ihre aktuelle Route wäre eine untergeordnete Route dieser Route.