如何预加载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>

但是我遇到了两个问题:

But I faced 2 problems:

1. 如果我的组件之一在构造函数RouteParams中具有以下内容:

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

构造函数:[ng.router.RouteParams，函数(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屋！