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

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>，其中角度加载其父组件的所有内容。在这里ApplicationsComponent有一个孩子PrivacysettingsforapplicationsComponent，反过来有两个孩子（PrivacysettingsforapplicationservicesComponent and PrivacysettingsforapplicationdataComponent即：服务和数据）。

我想检查是否有任何方法加载（PrivacysettingsforapplicationsComponent）儿童主要<router-outlet>而不是其直接的父亲<router-outlet>即。 ApplicationComponent的。我检查过的一种方法是将子组件作为对等组件放入父组件，但后来我的breadcrumb模块不识别谁是该组件PrivacysettingsforapplicationsComponent的真正父组件。

Answer 1

path: "applications/:applicationId/privacysettingsforapplications"

用以下路径替换它

path: ":applicationId/privacysettingsforapplications"

Answer 2

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

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

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

希望这有帮助。