如何解决Angular 9-无法停用延迟加载的模块上的路由器出口
一般来说,我有一个在激活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),}
]
}
];
这就是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
解决方法
我想这与延迟加载无关。 您只需通过实现组件的 ngOnDestroy()即可重置条件,该组件会在单击“后退”按钮时呈现。
,我已经找到了这种解决方法(丑陋,恕我直言)。在包含 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。