有没有一种方法可以在Angular 2中预加载路线，以防止白色闪烁和跳到顶部

Question

使用angular/angular 2种子，我定义了一组路线。然而，我有一个问题，每个路由都被延迟加载，导致白色闪烁和延迟（每次第一次加载路由时都会跳到页面顶部）。。。当加载html文件时，我们会摆脱这种旧风格。

这是我的路线配置：

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

有没有办法预先加载这些路线？

Answer 1

您的页面在转换过程中有动画吗？可能是风格。。。张贴一些代码，以便我们可以为您检查。你试过ng斗篷指令吗？它确实解决了您所描述的问题：https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

正如@A_Singh在一条评论中所说，问题是文件是单独加载的，因为它们没有被webpack捆绑，所以在需要之前不能将模板作为.js捆绑包包括在内，这导致了异步延迟（尽管我仍然无法解释跳到页面顶部的原因）。

以下是如何修改angular/angular 2种子项目的webpack配置：

软件包.json

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

webpack.config.js

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

组件.ts 中的示例用法

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

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