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

问题

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.

回答1:

path: "applications/:applicationId/privacysettingsforapplications"

Replace this with following path

path: ":applicationId/privacysettingsforapplications"

回答2:

You need to provide the full path instead of just router path. e.g. 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.

来源：https://stackoverflow.com/questions/47976360/angular-2-4-5-load-child-component-to-main-router-outlet