角度路由设置问题

Question

我有一个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
  },
  { path: "**", 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, AfterViewInit {
  constructor(private router: Router, private route: ActivatedRoute) {}

  AfterViewInit(): void {
    //this.router.navigate(["../remote/login"], { relativeTo: this.route });
  }

Answer 1

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

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

触发PiComponent的重新加载，该默认选择第一个选项卡，从而覆盖远程选项卡。 解决方案是管理组件外部的选项卡。 以下link演示了解决方案。