0

Baiscally 我有一个组件需要在激活/停用 a 时有条件地显示named router-outlet。激活方面没问题,但是当 url 变回时它不起作用(即有人按下浏览器的后退箭头):仍然显示路由器出口内容。我认为主要问题是路由器插座是延迟加载模块的一部分。我已经检查了 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

4

2 回答 2

0

我想这与延迟加载无关。您只需通过实现在单击后退按钮时呈现的组件的ngOnDestroy()来重置条件。

于 2020-08-11T09:41:54.600 回答
0

我找到了这个(丑陋的,恕我直言)解决方法。在包含router-outlet指令的组件中,我订阅了router 事件以跟踪第一次激活 router-outlet 时 url 的变化。然后,当 url 变回与父组件路径匹配的那个时,我停用了 router-outlet。

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>
于 2020-08-11T17:18:05.200 回答