Wie lade ich angulare2 Ansichten hoch, so dass die weiße Seite beim ersten Laden nicht flimmert?

Question

Ich baue eine angular 2 App in plain JS. Mein Problem ist, dass wenn ich von einer Seite zu einer anderen blicke eine weiße Seite flackern, bis die neue Ansicht gerendert wird. Dies geschieht für alle Komponenten erst beim ersten Zugriff. Wenn ich zum zweiten Mal zur selben Route gehe, wird die Seite ohne weiße Seite geladen. ich den Bildschirm erfassen zu meinem Problem besser zu erklären: https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view?usp=sharing

Hier ist meine Hauptansicht:

<router-outlet></router-outlet> 

<nav id="menu"> 
    <a [routerLink]="['Page1']">Page 1</a> 
    <a [routerLink]="['Page2']">Page 2</a> 
    <a [routerLink]="['Page3']">Page 3</a> 
    <a [routerLink]="['Page4']">Page 4</a> 
    <a [routerLink]="['Page5']">Page 5</a> 
</nav> 

RouteConfig wie folgt definiert ist:

AppComponent = ng.router 
    .RouteConfig([ 
     {path: '/page1', name:"Page1", component: Page1Component, useAsDefault: true }, 
     {path: '/page2', name:"Page2", component: Page2Component}, 
     ... 
    ]) 
    (AppComponent); 

Und alle meine Komponenten eine .html Datei und eine .css Datei wie folgt:

Page1Component = ng.core 
    .Component({ 
     selector: 'rl-page1', 
     templateUrl: 'app/components/page1/view.html', 
     styleUrls: ['app/components/page1/style.css'], 
     directives: [ng.router.ROUTER_DIRECTIVES] 
    }) 
    .Class({ 
     constructor: [ng.router.Router, function(router) { 
      this.router = router; 


     }] 
    }); 

Von was es aussieht wie eckige Cacheseiten, nachdem ich darauf zugreife und beim zweiten Zugriff sofort angezeigt werde (ohne weißes Flackern). Ich suche, wie ich das vorladen kann, aber ich kann keine Antwort oder Methode dazu finden.

Bitte lassen Sie mich wissen, wenn Sie mehr Code benötigen.

(Ich benutze keine Seiten 1, 2 in realer Anwendung, nur für diese Frage, die ich zum Beispiel mehr klar sein geändert)

Dank.

EDIT: 2016-03-18

Ich versuche DynamicComponentLoader zu verwenden, um alle Komponenten in einem versteckten div zu laden. Der Code sieht wie folgt in AppComponent:

ngOnInit: function(){ 
    this.dcl.loadIntoLocation(Page1Component, this.elementRef, 'preloadpages'); 
    this.dcl.loadIntoLocation(Page2Component, this.elementRef, 'preloadpages'); 
}, 

und die html wo geladen ist: <div style="display: none;"><div #preloadpages></div></div>

Aber ich konfrontiert 2 Probleme:

1. Wenn einer meiner Komponente im Konstruktor RouteParams wie folgt:

   Konstruktor: [ng.router.RouteParams, Funktion (routeParam) { ... }], Ich erhalte diesen Fehler: EXCEPTION: No provider for RouteParams! (class19 -> RouteParams)

2. Alle Komponenten werden geladen, genau wie Sie es öffnen. Wenn ich einen Ajax-Aufruf in einem Konstruktor habe, wird ein Ajax-Aufruf erstellt und alle Komponenten html werden in meinem versteckten div angehängt. Hier kann ein Performance-Problem auftreten, wenn ich beim Start versuche, 5 Komponenten zu laden und einige Ajax-Aufrufe. Ich suche, ob es eine Lösung gibt, um nur html + css zu laden oder um ein Flag an Komponentenkonstruktor zu senden, um zu wissen, dass ich nur für das Predigen versteckte lade.

Danke.

Answer 1

hinzufügen Wrapper um die <router-outlet>

<div [hidden]="!isInitialized"> 
    <router-outlet></router-outlet> 
</div> 

auf der Seite Komponente gesetzt isInitialized zu false.Dann

rufen

this.router.navigate(['Page1']) 
.then(_ => this.router.navigate(['page2'])) 
.then(_ => this.router.navigate(['page3'])) 
... 
.then(_ => { 
    this.isInitialized = true; 
    this.router.navigate(['Page1']); 
}); 

Answer 2

paraphrasiert https://stackoverflow.com/a/37298914/441662

Das Problem ist, dass die Dateien separat geladen, die Sie verhindern können, so etwas wie webpack verwenden, die Quellen zu Bündeln zusammenstellt, die sowohl Ihre Anwendung einschließen können und die verwendeten Vorlagen in die Routen. (obwohl ich immer noch nicht den Sprung zum Anfang der Seite erklären kann).

Hier ist, wie Sie die webpack Config des angular/angular2-seed Projektes ändern können:

package.json

"devDependencies": { 
    ..., 
    "html-loader": "^0.4.3", 
}, 

webpack.config.js

module: { 
    loaders: [ 
    ..., 
    { test: /\.html$/, loader: 'html' } 
    ] 
} 

Beispiel für die Verwendung in Ihrer Komponente. ts

@Component({ 
    template: require('app/components/your-component/your-component.html') 
}) 

Jetzt werden die Routen sofort geladen und es gibt kein Flackern oder Springen.