Angular 4 嵌套路由器插座

Posted 2023-02-22

【中文标题】Angular 4 嵌套路由器插座

【英文标题】：Angular 4 nested router outlet

【发布时间】：2018-08-18 08:07:35

【问题描述】：

我在 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 模块加载到产品路由器插座中。

【问题讨论】：

延迟加载应该不是问题。你的路由配置是什么样的？此外，如果您使用命名（也称为辅助或辅助路由），使用它们的语法是不同的。您可能希望删除 name 属性并仅使用嵌套（也称为子）路由。

【参考方案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

【参考方案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' ,
    ]
  
];

【讨论】：

产品路径对象上缺少 children 属性。一旦添加了 children 属性，它就会开始在正确的路由器插座中加载

虽然这是公认的答案，但必须在应用程序路由模块中定义所有路由并不“正确”。您需要将产品路径添加为空路径的子节点

这样的实现给了我错误：Invalid configuration of route 'products': children and loadChildren cannot be used together