angular - 如何预加载 angular2 View 以便在第一次加载时不会闪烁白页？

Question

我正在用纯 JS 构建一个 Angular 2 应用程序。我的问题是，当我从一个页面切换到另一个页面时，它会闪烁一个白页，直到呈现新 View 。只有在我第一次访问所有组件时才会发生这种情况。如果我第二次走同一条路线，页面加载时没有白页。我捕获屏幕以更好地解释我的问题: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;


        }]
    });

从我访问它们之后 Angular 缓存页面的样子来看，第二次访问将立即显示(没有白色闪烁)。我搜索了如何预加载它，但找不到任何答案或方法。

如果您需要更多代码，请告诉我。

(我没有在真实应用中使用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 配置的方法项目:

包.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')
})

现在路线会立即加载，不会出现闪烁或跳跃现象。