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

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

您的页面在过渡期间是否具有动画效果？可能是风格... Post 一些代码，以便我们为您检查。您是否尝试过 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' }
  ]
}

你的用法示例-component.ts

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

现在路线会立即加载，不会出现闪烁或跳跃现象。

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

Is there a way to preload routes in Angular 2 to prevent white flickering and jumping to top?

angular2-routing

angular