Angular 5延迟加载的应用程序和浏览器导航按钮

时间:2018-04-18 13:12:17

标签: angular angular-routing

我有一个很棒的应用程序,主要是通过编写大量延迟加载的模块来创建的。我的问题在于浏览器按钮,无论用户点击backforward还是refresh我的应用都会崩溃。

据我研究过,我可以以某种方式捕捉这些事件,阻止它们传播并自己处理事件。

还有其他好的解决方案吗?我应该考虑哪些方面?

因评论而修改

我认为这不会是角度路由器问题。事实是,我的应用程序以编程方式在运行时更改路由器配置。因此,当用户尝试重新加载时,他会尝试输入尚未存在的路径。我可以以某种方式使用数据存储区并在导航之前重新注入路由器配置,但我不认为这是明智的。

崩溃,我只是指couldn't find route 'x\a\b'等错误。

我现在的想法是抓住浏览器按钮的事件并自己处理它们,改变它们的工作方式,但我不确定这是否可能(我猜是什么样的gmail) 。

1 个答案:

答案 0 :(得分:0)

我也有大量的路线和处理路线变化我使用routeEvent

import {ActivatedRoute, Event, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
...
  routerEvent;

  constructor(private router: Router,
              private route: ActivatedRoute) {
    this.routerEvent = router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // Show loading indicator
      }

      if (event instanceof NavigationEnd) {
        // Hide loading indicator
        this.init();
      }

      if (event instanceof NavigationError) {
        // Hide loading indicator
        // Present error to user
      }
    });
  }

正如事件名称所示,当你刚刚加载路线时会触发 NavigationStart ,当路线导航加载完成并且 NavigationError 时会触发 NavigationEnd strong>当您的路线无法加载时。

在不再需要时取消订阅也是一个好主意。

  ngOnDestroy(): void {
    this.routerEvent.unsubscribe();
  }