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

时间:2016-12-21 21:50:23

标签: angular angular2-routing

我正在使用路线解析器,例如:

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

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

在执行路线解析器时,是否可以向用户提供任何形式的视觉反馈?

1 个答案:

答案 0 :(得分: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进度条),我仍然不知道如何实施。