Question

一般来说，我有一个在激活named router-outlet时必须有条件显示的组件。好的，在激活方面，但是当网址改回（即有人按下浏览器的后退箭头）时，该功能不起作用：路由器出口的内容仍在显示。我认为主要的问题是路由器出口是延迟加载模块的一部分。我已经检查了this previous answer的Angular 7，但对我的项目（Angular 9）没有任何影响。

这是我的路由模块路由

const routes: Routes = [
  { path: '',  component: StudentsComponent },
  { path: ':id/macro',
      component: StudentDetailComponent,
      runGuardsAndResolvers: 'always',
      resolve: { 
        item: StudentDetailResolverService,
        macroAssignments: MacroAssignmentsResolverService
      },
      children: [
        {
          path: ':id/lto',      // ***** PROBLEMS HERE ************************************
          loadChildren: () => import('../lto/lto.module').then(m => m.LTOModule),
          runGuardsAndResolvers: 'always',
        }
      ]
  }
];

这就是router-outlet指令所在的模板

<app-item-detail>
    ...
    <div *ngIf="!outlet.isActivated" list >
        <app-student-detail-macro-list [student]="this.item" [macroAssignments]="this.macroAssignments" ></app-student-detail-macro-list>
    </div>

</app-item-detail>

<router-outlet #outlet="outlet" name='lto-list' (deactivate)='checkOutlet($event)' (activate)='checkOutlet($event)' ></router-outlet>

注意：： checkOutlet（$ event）只是在内置 router-outlet 触发事件时在控制台上打印某些内容的测试的东西。这使我发现激活路由器出口时正确触发了一个事件，但是当url重新变回时什么也没发生（因此，路由器出口应停用）。

最后，延迟加载模块 LTOModule

的路由模块

const routes: Routes = [
  { path: '' , component: LtoListComponent, outlet: 'lto-list' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LTORoutingModule { }

不知道它是否有用，但这也是激活路由器出口的模板部分

<li *ngFor="let macroAssignment of this.macroAssignments" >
    <a [routerLink]="[macroAssignment.macro, 'lto']" >
        <span >{{ macroAssignment.macro_name }}</span>
    </a>
</li>

**************** 编辑 *****************

我注意到当我按下第四箭头时，出现以下错误：ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet

Answer 1

我想这与延迟加载无关。您只需通过实现组件的 ngOnDestroy（）即可重置条件，该组件会在单击“后退”按钮时呈现。

Answer 2

我已经找到了这种解决方法（丑陋，恕我直言）。在包含 router-outlet 指令的组件中，我订阅了 router事件以跟踪首次激活Router-Outlet时URL中的更改。然后，当url更改回与父组件路径匹配的URL时，我将停用路由器出口。

onActiveOutlet(component: Component) {
    let previousUrl = this.router.url;
        this.router.events.subscribe(
          event => {
            if (event instanceof NavigationEnd) {
              if (previousUrl != this.router.url && previousUrl.includes(this.router.url)) {
                this.outlet.deactivate();
              }
            }
        }
    )
}

在父组件模板中，只需捕获插座激活时发出的事件

<router-outlet #outlet="outlet" name='lto-list' (activate)='onActiveOutlet($event)' ></router-outlet>

Angular 9-无法停用延迟加载的模块上的路由器出口

2 个答案: