如何解决角度路由设置问题
我有一个Angular库,其中包含自己的路由。
预期的情况是:
- 用户单击“添加远程组件”按钮。
- 加载CurrentCasesComponent组件(库),然后将其重定向到登录屏幕。
- 用户单击“身份验证”,RemoteBComponent将显示在选项卡内。
观察到的行为是:
- 用户单击“添加远程组件”按钮=>不显示任何内容。
- 用户第二次单击“添加远程组件”按钮=> CurrentCasesComponent成功加载。
- 用户单击身份验证=>远程屏幕成功显示。
我在运行时使用SystemJS在主应用程序中导入了该库,但在确定Angular路由设置应该是什么时遇到了一些问题。
该库的路由为:
const routes: Routes = [
{
path: "current",component: CurrentCasesComponent
},{
path: "login",component: LoginComponent
},{ path: "**",redirectTo: "current",pathMatch: "full" },];
@NgModule({
declarations: [],imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class CasesRoutingModule {}
主要应用的路由为:
const routes: Routes = [
{
path: "pi",component: PiComponent,children: [
{
path: "dynamic",component: DynamicPackComponent,children: [{ path: "",component: DynamicPackComponent }]
},{ path: "static",component: StaticComponent }
]
},{
path: "static",component: StaticComponent
},redirectTo: "pi",pathMatch: "full" }
];
@NgModule({
imports: [RouterModule.forRoot(routes,{ enableTracing: true })],exports: [RouterModule]
})
export class AppRoutingModule {}
在加载远程组件时,我将远程路由插入到主路由中的“ pi”路径下。没问题: 路由器看起来像这样:
export class CurrentCasesComponent implements OnInit,AfterViewInit {
constructor(private router: Router,private route: ActivatedRoute) {}
ngAfterViewInit(): void {
this.router.navigate(["./remote/login"],{ relativeTo: this.route });
}
我可以看到发出了以下路由呼叫:
NavigationEnd {id: 2,url: "/pi/remote/login",urlAfterRedirects: "/pi/remote/login"}
我在路由设置方面缺少什么,欢迎任何建议。
这是Stackblitz演示此问题的链接。stackblitz
请注意,如果您注释掉以下登录路由请求,则单击“添加远程组件”按钮后,“ CurrentCaseComponent”将成功显示。
export class CurrentCasesComponent implements OnInit,private route: ActivatedRoute) {}
AfterViewInit(): void {
//this.router.navigate(["../remote/login"],{ relativeTo: this.route });
}
解决方法
我终于明白了。 远程组件加载后,将触发以下调用:
NavigationEnd {id: 2,url: "/pi/remote/login",urlAfterRedirects: "/pi/remote/login"}
触发PiComponent的重新加载,该默认选择第一个选项卡,从而覆盖远程选项卡。 解决方案是管理组件外部的选项卡。 以下link演示了解决方案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。