如何预加载 angular2 视图，以便在首次加载时不会闪烁白页？

Question

我正在用普通的 JS 构建一个 Angular 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

转述https://stackoverflow.com/a/37298914/441662

问题在于文件是单独加载的，您可以防止使用诸如 webpack 之类的东西将源代码编译成包，这些包可以包含您的应用程序和路由中使用的模板。 （虽然我仍然无法解释跳转到页面顶部）。

以下是修改 angular/angular2-seed 项目的 webpack 配置的方法：

package.json

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

webpack.config.js

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

your-component.ts 中的示例用法

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

现在路线立即加载，没有闪烁或跳跃。

Answer 2

在<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']);
});