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组件，但是在主路由器插座中，而不是产品路由器插座。

我懒得在路线中加载产品模块。这可能是问题吗？

编辑：

路线如下：

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

如果我正确理解您的问题，您希望将组件.section-table tr:nth-of-type(5n+1) td div.count-circle { background-color: blue; } .section-table tr:nth-of-type(5n+2) td div.count-circle { background-color: yellow; } .section-table tr:nth-of-type(5n+3) td div.count-circle { background-color: black; }和TypeProduct1放入TypeProduct2中的<router-outlet>。如前所述，儿童路线可能是解决方案。

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

ProductsComponent

Answer 2

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

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]
})

更新

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

Angular 4嵌套路由器插座

2 个答案:

ProductRoutingModule

更新