Angular 角度布线设置问题

我有一个角度库，包括它自己的路由

预期的情况是：

• 用户单击“添加远程组件”按钮
• CurrentCasesComponent组件（库）加载，然后重定向到登录屏幕
• 用户单击“验证”，RemoteB组件将显示在选项卡内

观察到的行为是：

• 用户单击“添加远程组件”按钮=>不显示任何内容
• 用户再次单击“添加远程组件”按钮=>CurrentCasesComponent成功加载
• 用户单击authenticate=>远程屏幕将成功显示

我在运行时使用SystemJS在我的主应用程序中导入这个库，我在确定角度路由设置应该是什么方面遇到了一些问题

图书馆的路线是：

const routes:routes=[
{
路径：“当前”，
组件：CurrentCasesComponent
},
{
路径：“登录”，
组件：LoginComponent
},
{路径：**，重定向到：“当前”，路径匹配：“完整”}，
];
@NGD模块({
声明：[]，
导入：[RouterModule.forChild（路由）]，
导出：[路由模块]
})
导出类CasesRoutingModule{}

主应用程序的路由是：

const routes:routes=[
{
路径：“pi”，
组件：微型组件，
儿童：[
{
路径：“动态”，
组件：DynamicPackComponent，
子项：[{path:，组件：DynamicPackComponent}]
},
{路径：“静态”，组件：StaticComponent}
]
},
{
路径：“静态”，
组件：静态组件
},
{路径：**，重定向到：“pi”，路径匹配：“full”}
];
@NGD模块({
导入：[RouterModule.forRoot（路由，{enableTracing:true}）]，
导出：[路由模块]
})
导出类AppRoutingModule{}

加载远程组件时，我在主路由的“pi”路径下插入远程路由。没有问题： 路由器如下所示：

导出类CurrentCasesComponent实现OnInit，AfterViewInit{
构造函数（专用路由器：路由器，专用路由：ActivatedRoute）{}
ngAfterViewInit（）：void{
this.router.navigate（[“/remote/login”]，{relativeTo:this.route}）；
}

我可以看到发出了以下路由呼叫：

NavigationEnd{id:2，url:“/pi/remote/login”，urlAfterRedirects:“/pi/remote/login”}

我错过了一些路由设置和任何建议是欢迎的

下面是Stackblitz的链接，以演示该问题

请注意，如果您注释掉以下登录的路由调用，则单击“添加远程组件”按钮后，“CurrentCaseComponent”将成功显示

导出类CurrentCasesComponent实现OnInit，AfterViewInit{
构造函数（专用路由器：路由器，专用路由：ActivatedRoute）{}
AfterViewInit（）：void{
//this.router.navigate（[“./remote/login”]，{relativeTo:this.route}）；
}

我终于明白了。 一旦远程组件加载，它将触发以下调用：

NavigationEnd {id: 2, url: "/pi/remote/login", urlAfterRedirects: "/pi/remote/login"}

这会触发重新加载PiComponent，根据默认值选择第一个选项卡，从而覆盖远程选项卡。 解决方案是管理组件外部的选项卡。

---

下面演示了解决方案。

我应该指定远程组件应作为主应用程序中的新选项卡加载（就像您单击两次“添加…”按钮后观察到的最终结果）。我删除了我的答案，因为它没有反映您上面评论中提到的预期行为。