Jak wstępnie załadować widoki kątowe2, aby nie migotały białe strony przy pierwszym załadowaniu?

Question

Buduję aplikację kątową 2 w prostym JS. Mój problem polega na tym, że gdy przechodzę od strony na drugą, miga ona białą stroną do momentu wyświetlenia nowego widoku. Dzieje się tak w przypadku wszystkich komponentów tylko po raz pierwszy, gdy uzyskuję do nich dostęp. Jeśli przejdę do tej samej trasy po raz drugi, strona zostanie załadowana bez białej strony. przechwycić ekran, aby lepiej wyjaśnić mój problem: https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view?usp=sharing

Tu jest mój główny widok:

<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 jest zdefiniowany następująco:

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

I wszystkie moje elementy mają .html plik i plik .css podobny do tego:

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; 


     }] 
    }); 

Z tego, jak wyglądają kanciaste strony podręczne po uzyskaniu do nich dostępu, a przy drugim dostępie będzie wyświetlany natychmiast (bez białego migotania). Szukam, jak mogę to zrobić, ale nie mogę znaleźć żadnej odpowiedzi ani metody na ten temat.

Proszę dać mi znać, jeśli potrzebujesz więcej kodu.

(nie używam Strona1, Strona2 w prawdziwej aplikacji, tylko na to pytanie I zmienił się bardziej jasne, na przykład)

Dzięki.

EDIT: 2016-03-18

próbuję użyć DynamicComponentLoader załadować wszystkie składniki w ukrytym div. Kod wygląda następująco w AppComponent:

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

i html gdzie jest ładowany jest: <div style="display: none;"><div #preloadpages></div></div>

Ale w obliczu 2 problemy:

1. Jeśli jeden z moich składnik ma w konstruktorze RouteParams like this:

   Konstruktor: [ng.router.RouteParams, funkcja (routeParam) { ... }], Otrzymuję ten błąd: EXCEPTION: No provider for RouteParams! (class19 -> RouteParams)

2. Wszystkie składniki są ładowane tak, jak je otwierasz. Jeśli mam wywołanie ajax w konstruktorze, to wywoływane jest wywołanie ajax, a wszystkie składniki html będą dołączane do mojego ukrytego div. Tutaj może być problem z wydajnością, jeśli na starcie próbuję załadować jak 5 komponentów, a niektóre wykonują wywołania ajaxowe. Sprawdzam, czy istnieje rozwiązanie do załadowania tylko html + css lub wysłania flagi do konstruktora komponentów, aby wiedzieć, że ładuję ukryty tylko dla głoszenia.

Dzięki.

Answer 1

Dodaj owijkę wokół <router-outlet>

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

W składniku widoku ustawić isInitialized do false.Następnie zadzwonić

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

Answer 2

Parafrazując https://stackoverflow.com/a/37298914/441662

Problem polega na tym, że pliki są ładowane oddzielnie, którym można zapobiegać za pomocą czegoś podobnego WebPacka że kompiluje źródła w wiązki, które mogą obejmować zarówno swoją aplikację i szablony wykorzystywane w trasy. (chociaż nadal nie mogę wyjaśnić skoku na górę strony).

Oto jak można zmodyfikować config WebPACK projektu angular/angular2-seed:

package.json

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

webpack.config.js

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

Przykład użycia w komponentem. ts

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

Teraz trasy są ładowane natychmiastowo i nie ma migotania ani skakania.