ng2路由解析器的进度加载器

Question

我正在使用路线解析器，例如：

  routes.push({
    path: '', component: MainComponent, children: [
      {path: 'config', component: ConfigurationWizardComponent, resolve: { settings: SettingsResolver }},
      {path: 'jobs', children: [
        {path: '', component: JobsOverviewComponent, resolve: { settings: NoFallbackSettingsResolver }},
        {path: 'add', component: JobFormComponent, resolve: { databases: DatabaseResolver }},
      ]},
      {path: '', redirectTo: '/jobs', pathMatch: 'full'},
    ],
  });

但是，由于解析器需要一段时间才能完成，因此在解析器完成之前，应用程序似乎没有做任何事情。

在执行路线解析器时，是否可以向用户提供任何类型的视觉反馈？

Answer 1

我也有这个问题。如果您计划使用一个不表示任何进度的简单加载器（例如，一个简单的微调器加载器），您可以做的是订阅路由器的事件并显示和隐藏加载器。

constructor(private router: Router) {
 router.events
 .filter(event => event instanceof NavigationStart)
 .subscribe(() => { // show the progress bar });

  router.events
 .filter(event => event instanceof NavigationEnd)
 .subscribe(() => { // complete the progress bar })
}

但是，如果您计划在加载过程中显示任何进度（如顶部的Youtube进度条），那我仍然不知道如何实现。