角度路由设置问题

Question

I have an Angular library that includes its own routing.

The expected scenario is:

• The user clicks on the 'Add remote component' button.
• The CurrentCasesComponent component (library) loads, then it redirects to the login screen.
• The user clicks 'Authenticate', the RemoteBComponent displays inside the tab.

Observed behavior is:

• The user clicks on the 'Add remote component' button => nothing displays.
• The user clicks on the 'Add remote component' button a second time => CurrentCasesComponent loads successfully.
• The user clicks authenticate => the remote screen displays successfully.

I import this library in my main app at runtime using SystemJS and I have some issues figuring out what the Angular routing setup should be.

The library's routing is:

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 {}

The main app's routing is:

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 {}

I insert the remote routing under the 'pi' path in the main routing when loading the remote component. No issue with that: the router looks like this:

  export class CurrentCasesComponent implements OnInit, AfterViewInit {
  constructor(private router: Router, private route: ActivatedRoute) {}

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

I can see that the following routing call is issued:

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

I am missing something with the routing setup and any advice is welcome.

Here is a link to Stackblitz to demonstrate the issue. stackblitz

Note that if you comment out the following routing call to the login, the 'CurrentCaseComponent' displays successfully once you click on the 'Add remote component' button.

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

I finally figured it out. Once the remote component loads, it fires the following call:

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

which triggers the reloading of the PiComponent which selects the first tab per default thus overwriting the remote tab. The solution is to manage the tabs outside the component. The following link demonstrates the solution.