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