按下后退按钮时未调用Angular Router Guard

问题描述

我有一个Angular应用程序在iframe中运行，该应用程序具有我正在运行的模块的路由防护。每当我使用应用程序内的链接或地址栏导航到页面时，都会激活路由防护，并将应用程序路由到正确的组件。但是由于某些原因，当我从组件中单击“后退”按钮时，模块的路由防护无法启动，并且应用导航到该模块的基本组件-不应发生。

我已经测试并确认，当我使用以下命令之一按下组件内部的后退按钮时，会触发路由器事件：

export class FourthComponent {

  constructor(private readonly router: Router) {
    this.router.events.subscribe((event: NavigationStart) => {
      if (event.navigationTrigger === 'popstate') {
        console.log('back or forward button clicked');
      }
    });
  }

每当我从辅助组件屏幕中单击“后退”按钮时，控制台日志便会打印。

这是子模块的路由模块routes数组：

const routes: Routes = [
  {
    path: '',canActivate: [SubModuleGuard],children: [
      {
        path: 'first',component: FirstComponent
      },{
        path: 'second',component: SecondComponent
      },{
        path: 'third',component: ThirdComponent
      },{
        path: 'fourth',component: FourthComponent
      },{
        path: '**',component: BaseComponent
      }
    ]
  }
];

由于某种原因，每次我从FourthComponent单击后退按钮时，我都导航到BaseComponent（可能是SubModule的所有子组件的情况）。如果我再次单击“后退”按钮，它也会对iframe的父级执行后退操作。

请告诉我为什么路由防护器（在本例中为SubModuleGuard）不会触发，以及如何在单击后退按钮时强制触发路由防护器。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）