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

Question

我正在用简单的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, this.elementRef, 'preloadpages');
},

并且加载的html是: <div style="display: none;"><div #preloadpages></div></div>

但我面临两个问题:

1. 如果我的一个组件在构造函数RouteParams中有这样的:

   构造函数:[ng.router.RouteParams,function(routeParam){...}],我收到此错误: EXCEPTION: No provider for RouteParams! (class19 -> RouteParams)

2. 所有组件都像打开它一样加载.如果我在构造函数中有ajax调用,则创建ajax调用,并且所有组件html将附加在我的隐藏div中.这可能是一个性能问题,如果一开始我尝试加载像5个组件和一些进行ajax调用.我正在寻找是否有一个解决方案只加载html + css或发送一个标志到组件构造函数知道我加载隐藏只是为了讲道.

谢谢.

Answer 1

在周围添加一个包装纸<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']);
});