Angular 2/4/5 - Load child component to main router-outlet

Question

I am working with angular 5 currently. I have came across the problem with my router configuration and its presentation of component content accordingly. As below is my router configuration.

  const appRoutes: Routes = [
    { path: "", pathMatch: "full", redirectTo: "home" },
    {
      path: "home", component: HomeComponent
    },
    {
      path: "applications", component: ApplicationsComponent,
      children: [{
        path: ":applicationId/privacysettingsforapplications", component: PrivacysettingsforapplicationsComponent,
        children: [
          { path: "", pathMatch: "full", redirectTo: "services" },
          {
            path: "services", component: PrivacysettingsforapplicationservicesComponent
          },
          {
            path: "data", component: PrivacysettingsforapplicationdataComponent
          }]
      }]
    },
    {
      path: "devices", component: DevicesComponent,
    },
  ];

We have one main <router-outlet></router-outlet> in which angular loads all content of its parent component. Here ApplicationsComponent has one children PrivacysettingsforapplicationsComponent which in turn has two children( PrivacysettingsforapplicationservicesComponent and PrivacysettingsforapplicationdataComponent ie: service and data).

I want to check that is there any way to load( PrivacysettingsforapplicationsComponent ) children on main <router-outlet> instead of its immediate parent <router-outlet> ie. ApplicationComponent 's. One way I have checked is to put child component as peer to parent component but then my breadcrumb module does not identify who is the real parent of that component PrivacysettingsforapplicationsComponent .

Answer 1

path: "applications/:applicationId/privacysettingsforapplications"

将其替换为以下路径

path: ":applicationId/privacysettingsforapplications"

Answer 2

You need to provide the full path instead of just router path. eg provide path line applications/privacysettingsforapplications/services.

You need to provide the correct path as the above is just an example.

With this the service template will load on parent most router outlet.

Hope this help.