Angular 4 嵌套路由器插座

Question

我在 AppComponent 中有一个路由器插座，可以很好地加载子组件。其中一个子组件有多个子组件，我想将所有子组件加载到父路由器插座中，如下所示

AppComponent  <router-outlet> (This loads all child including products)
  Customers (component)
  Pricing   (component)
  Products  (component) <router-outlet name="products"> (This should load child products)
     TypeProduct1   (Component)
     TypeProduct2   (Component)

但我所有的子产品都加载在主路由器插座中，例如当我输入网址时

http://localhost:4200/products/typeproduct1 - 它成功加载 TypeProduct1 组件，但在主路由器出口而不是产品路由器出口。

我在路由中懒惰地加载 Products 模块。会不会是这个问题？

编辑：

路线如下所示：

AppRoutingModule:

const routes:Route = [
  { path: 'customers', loadChildren:'/path/to/customers/module' },
  { path: 'pricing', loadChildren:'/path/to/pricing/module' }
  { path: 'products', loadChildren: 'path/to/products/module' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })],
  exports: [RouterModule],
  declarations: [NotFoundComponent]
})

ProductRoutingModule 看起来像这样：

const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: 'type1', loadChildren: 'path/to/Type1product/module' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

所有组件都加载到顶级路由器插座中。我希望 type1 模块加载到产品路由器插座中。

Answer 1

要正确使用模块的概念，路由仍应在 ProductRoutingModule 中定义。你只需要做一个小的编辑。您应该将延迟加载的路由定义为空路由的子级。

产品路由模块

const routes: Routes = [
  { path: '', component: ProductsComponent, 
    children: [
        { path: 'type1', loadChildren: 'path/to/Type1product/module' },
        { path: 'type2', loadChildren: 'path/to/Type2product/module' }
    ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

更新

如果您在延迟加载的组件中命名了路由，请不要使用如图所示的空路由。这是一个已知的 Angular 错误，可以在此处跟踪：Github: Lazy load auxilary #10981

Answer 2

如果我正确理解您的问题，您希望将组件 TypeProduct1 和 TypeProduct2 放入 ProductsComponent 中的 <router-outlet>。如前所述，子路由可能是解决方案。

我认为您的 AppRoutingModule 应该编辑为：

// AppRoutingModule
const routes:Route = [
  { path: 'customers', loadChildren:'/path/to/customers/module' },
  { path: 'pricing', loadChildren:'/path/to/pricing/module' }
  { 
    path: 'products',
    loadChildren: 'path/to/products/module',
    children: [
      { path: 'type1', loadChildren: 'path/to/Type1product/module' },
      { path: 'type2', loadChildren: 'path/to/Type2product/module' },
    ]
  }
];