Question

使用angular/angular2-seed我定义了一堆路由。但是，我遇到的问题是每个路径都是延迟加载导致白色闪烁和延迟（并且每次第一次加载路径时跳转到页面顶部）...我们在加载时会离开的那种东西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-cloak指令吗？它确实可以解决您所描述的问题：https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

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

以下是如何修改angular/angular2-seed项目的webpack配置：

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

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

有没有办法在Angular 2中预加载路径以防止白色闪烁并跳到顶部？

2 个答案: