尽管在路由上定义了指定的路由器插座，但 Angular 2 路由仍被加载到顶级路由器插座中

Question

这里你可以看到问题：

admin-area-models-models 应该被渲染到名称为models-content 的路由器出口中，但它被放置在与父模块相同的路由器出口中，即admin-area-models。这没有任何意义，因为我在admin-area-models 路由器中得到了这个：

const routes: Routes = [
  {
    path: '',
    component: ModelsComponent
  },
  {
    path: 'brands',
    loadChildren: '../pages/+models-brands/models-brands.module#ModelsBrandsModule',
    outlet: 'models-content'
  },
  {
    path: 'models',
    loadChildren: '../pages/+models-models/models-models.module#ModelsModelsModule',
    outlet: 'models-content'
  },
  {
    path: 'models/:id',
    loadChildren: '../pages/+model/model.module#ModelModule',
    outlet: 'models-content'
  }
];

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ModelsComponent
  ]
})

export class ModelsRouterModule {}

为什么当我定义了一个特定的出口时，它仍然将它呈现到顶层？

编辑：

如果我更改为子路由，则改为这样定义：

const routes: Routes = [
  {
    path: '',
    component: ModelsComponent,
    children: [
      {
        path: 'brands',
        loadChildren: '../pages/+models-brands/models-brands.module#ModelsBrandsModule',
        outlet: 'models-content'
      },
      {
        path: 'models',
        loadChildren: '../pages/+models-models/models-models.module#ModelsModelsModule',
        outlet: 'models-content'
      },
      {
        path: 'models/:id',
        loadChildren: '../pages/+model/model.module#ModelModule',
        outlet: 'models-content'
      }
    ]

  }
];

那么所有路由都不起作用。 ModelsComponent 位于 /admin/dashboard/models，因此在第一个配置中，我显示了所有可访问的路由，如下所示：

/admin/dashboard/models
/admin/dashboard/models/(models-content:brands)
/admin/dashboard/models/(models-content:models)
/admin/dashboard/models/(models-content:models/5) // Any number

但是在尝试使用children 的配置时，我无法再访问这些路由中的任何一个。建议将此语法与延迟加载的文件一起使用是错误的。

Answer 1

因为您的 admin-area-models-models 不是您的 admin-area-models 的子级，所以您的路线需要类似于：

const routes: Routes = [
  {
    path: '',
    component: ModelsComponent,
    children: [
      {
        path: 'brands',
        loadChildren: '../pages/+models-brands/models-brands.module#ModelsBrandsModule',
        outlet: 'models-content'
      },
      {
        path: 'models',
        loadChildren: '../pages/+models-models/models-models.module#ModelsModelsModule',
        outlet: 'models-content'
      },
      {
        path: 'models/:id',
        loadChildren: '../pages/+model/model.module#ModelModule',
        outlet: 'models-content'
      }
    ]

  }
];

您想在 admin-area-models 内呈现您的辅助路线，在那里您有您的 <router-outlet name="models-content">，但这就是您声明路线的方式：

这就是你想要渲染它们的方式：

你显然需要改变你的逻辑，因为你的路线不是兄弟姐妹他们是admin-area-models的孩子