Question

我目前正在使用角度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，即：服务和数据）。

我想检查是否有任何方法可以在主PrivacysettingsforapplicationsComponent上加载（<router-outlet>）子项，而不是其直接父<router-outlet>，即。 ApplicationComponent＆＃39;第我检查过的一种方法是将子组件作为对等组件放入父组件，但是我的breadcrumb模块不能识别该组件的真正父组件PrivacysettingsforapplicationsComponent。

Answer 1

path: "applications/:applicationId/privacysettingsforapplications"

将此替换为以下路径

path: ":applicationId/privacysettingsforapplications"

Answer 2

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

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

使用此功能，服务模板将加载到父级路由器插座上。

希望得到这个帮助。

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

2 个答案: