Angular 2/4/5 - 将子组件加载到主路由器插座

Question

我目前正在使用 angular 5。 我遇到了我的路由器配置及其相应组件内容呈现的问题。 下面是我的路由器配置。

  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,
    },
  ];

我们有一个主要的<router-outlet></router-outlet> ，其中 angular 加载其父组件的所有内容。 这里ApplicationsComponent有一个子项PrivacysettingsforapplicationsComponent ，而后者又具有两个子项（ PrivacysettingsforapplicationservicesComponent and PrivacysettingsforapplicationdataComponent即：服务和数据）。

我想检查是否有任何方法可以在主<router-outlet>上加载（ PrivacysettingsforapplicationsComponent ）子项而不是它的直接父项<router-outlet>即。 ApplicationComponent的。 我检查过的一种方法是将子组件作为父组件的对等组件，但是我的面包屑模块​​无法识别谁是该组件PrivacysettingsforapplicationsComponent的真正父PrivacysettingsforapplicationsComponent 。

Answer 1

path: "applications/:applicationId/privacysettingsforapplications"

将其替换为以下路径

path: ":applicationId/privacysettingsforapplications"

Answer 2

您需要提供完整路径，而不仅仅是路由器路径。 例如，为应用程序/服务提供路径线应用程序/隐私设置。

您需要提供正确的路径，因为上面只是一个例子。

有了这个，服务模板将加载到父大多数路由器插座上。

希望这有帮助。