有没有一种方法可以在Angular 2中预加载路线以防止白色闪烁和跳到顶部? [英] Is there a way to preload routes in Angular 2 to prevent white flickering and jumping to top?

问题描述

使用 angular/angular2-seed ，我定义了很多路线.但是，我遇到的问题是，每条路线的延迟加载都会导致白色闪烁和延迟(并且每当第一次加载路线时都会跳到页面顶部)...这种情况是我们在加载时会避开的html文件是旧样式.

Using the angular/angular2-seed I have defined a bunch of routes. However, I have the problem where each route is lazily loaded causing a white flickering and a delay (and jumps to the top of the page each first time a route is loaded)... the kind of thing we were getting away from when loading html files old style.

这是我的路线配置:

@RouteConfig([
  {path: '/about', component: About, name: 'About', useAsDefault: true},
  {path: '/features', component: Features, name: 'Features'},
  {path: '/examples', component: Examples, name: 'Examples'},
  {path: '/download', component: Download, name: 'Download'},
  {path: '/contact', component: Contact, name: 'Contact'}
])

是否可以预加载这些路线?

Is there a way to preload these routes?

推荐答案

正如@A_Singh在评论中所述，问题在于文件是单独加载的，因为它们没有被webpack捆绑在一起，因此您不能包含模板在您需要它们之前将其作为.js捆绑包，这会导致异步延迟(尽管我仍然无法解释跳转到页面顶部的原因).

As @A_Singh stated in a comment, the problem is that the files are loaded separately because they are not bundled by webpack, so you can't include the templates as .js bundle before you need them, causing the async delay (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.

这篇关于有没有一种方法可以在Angular 2中预加载路线以防止白色闪烁和跳到顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！