如何预加载angular2视图,这样第一次加载时不会闪烁白页？

我正在用简单的JS构建一个有角度的2应用程序.
我的问题是,当我从一个页面更改为另一个页面时,它会闪烁一个白页,直到呈现新视图.仅在我第一次访问它们时才会发生这种情况.如果我第二次进入相同路线,则页面加载时没有白页.
我抓住屏幕来解释我的问题： https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view?usp=sharing

这是我的主要观点：

<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的定义如下：

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

我的所有组件都有.html文件和.css文件,如下所示：

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;


        }]
    });

从我访问它们后看起来像角度缓存页面,在第二次访问时将立即显示(没有白色闪烁).我搜索我如何能够解除这个问题,但我找不到任何答案或方法.

如果您需要更多代码,请与我们联系.

(我不在实际应用中使用Page1,Page2,仅针对此问题,我更改为更清晰例如)

谢谢.

编辑：2016-03-18

我尝试使用DynamicComponentLoader加载隐藏div中的所有组件.代码在AppComponent中如下所示：

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

并且加载的html是：< div style =“display：none;”>< div #preloadpages>< / div>< / div>

但我面临两个问题：

>如果我的一个组件在构造函数RouteParams中有这样的：

构造函数：[ng.router.RouteParams,function(routeParam){
    …
}],
我收到此错误：EXCEPTION：没有RouteParams的提供程序！ (class19 – > RouteParams)
>所有组件都像打开它一样加载.如果我在构造函数中有ajax调用,则创建ajax调用,并且所有组件html将附加在我的隐藏div中.这可能是一个性能问题,如果一开始我尝试加载像5个组件和一些进行ajax调用.我正在寻找是否有一个解决方案只加载html css或发送一个标志到组件构造函数知道我加载隐藏只是为了讲道.

谢谢.

解决方法

在< router-outlet>周围添加一个包装器

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

在页面组件集中,isInitialized为false.然后打电话

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