如何预加载 angular2 视图，以便在首次加载时不会闪烁白页? [英] How to preload angular2 views so will not flicker white page on first load?

问题描述

我正在用纯 JS 构建一个 angular 2 应用程序.我的问题是，当我从一个页面切换到另一个页面时，它会闪烁一个白页，直到呈现新视图.这仅在我第一次访问所有组件时发生.如果我第二次去相同的路线，页面加载时没有白页.我捕获屏幕以更好地解释我的问题:https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view?usp=sharing

I am building an angular 2 app in plain JS. My problem is that when I change from a page to another it flicker a white page until the new view is rendered. This happens for all components only first time I access them. If I go to same route second time the page is loaded without white page. I capture the screen to explain better my problem: 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 定义如下:

RouteConfig is defined like this:

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

我所有的组件都有一个 .html 文件和一个 .css 文件，如下所示:

And all my components have a .html file and a .css file like this:

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;


        }]
    });

从我访问它们之后看起来像角度缓存页面并且在第二次访问时将立即显示(没有白色闪烁).我搜索了如何预加载，但找不到任何答案或方法.

From what it looks like angular cache pages after I access them and at second access will display instantly (without white flickering). I search how I can preloade this but I can't find any answer or method on this.

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

Please let me know if you need more code.

(我在实际应用中没有使用Page1、Page2，只是针对这个问题我改的更清楚了例如)

(I don't use Page1, Page2 in real app, only for this question I changed to be more clear for example)

谢谢.

2016-03-18

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

I try to use DynamicComponentLoader to load all the components in a hidden div. The code looks like this in 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>

and the html where is loaded is: <div style="display: none;"><div #preloadpages></div></div>

但我遇到了两个问题:

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

1. If one of my component has in the constructor RouteParams like this:

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

constructor: [ng.router.RouteParams, function(routeParam) { ... }], I am getting this error: EXCEPTION: No provider for RouteParams! (class19 -> RouteParams)

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

All components are loaded just like you open it. If I have a ajax call in a constructor that ajax call is created and all the components html will be appended in my hidden div. Here can be a performance problem if at start I try to load like 5 components and some make ajax calls. I am looking if there is a solution to load only html + css or to send a flag to component constructor to know that I am loading hidden just for preaching.

谢谢.

推荐答案

释义 https://stackoverflow.com/a/372​​98914/441662

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

The problem is that the files are loaded separately, which you can prevent using something like webpack that compiles the sources into bundles which can include both your app and the templates used in the routes. (altough I still can't explain the jump to the top of the page).

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

Here's how you can modify the webpack config of the angular/angular2-seed project:

package.json

package.json

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

webpack.config.js

webpack.config.js

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

your-component.ts 中的示例使用

Example usage in your-component.ts

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

现在路由立即加载，没有闪烁或跳跃.

Now the routes are loaded instantly and there is no flickering or jumping going on.

这篇关于如何预加载 angular2 视图，以便在首次加载时不会闪烁白页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！