时间戳

首页 > 解决方案 > 模块结构Angular，是否在模块中使用共享组件？

angular - 模块结构Angular，是否在模块中使用共享组件？

问题描述

我试图对设计项目 Angular 做出正确的决定。

应用程序的主要实体为Order。

Order有三种使用情况：

  1. 分配
  2. 分配
  3. 执行

我决定创建三个模块：DistributionModule, AssigningModule, ExecutionModule实体点为DistributionComponent, AssigningComponent, ExecutionComponent.

每个实体点组件包含两个组件：

  1. 侧边栏组件
  2. 内容组件

每个订单都有详细信息：

  1. 短单
  2. 订单地址
  3. 订单申请人
  4. 订单历史

然后全部用在里面OrderDetailsComponent。

Schema 用于带有自己的侧边栏的订单列表：

OrderDistributionModule
   OrderDistributionComponent <-- Entry component point with route outlet
     OrderDistributionWrapperComponent
         OrderSideBarComponent
         OrderListComponent

Schema 用于带有自己的侧边栏的订单详细信息：

OrderDistributionModule
   OrderDistributionComponent <-- Entry component point with route outlet
     OrderDistributionWrapperDetailsComponent
         OrderSideBarComponent
         OrderDetailsComponent
             OrderDetailsAddressComponent
             OrderDetailsApplicianComponent

我怀疑包装：

1. OrderDistributionWrapperComponent
2. OrderDistributionWrapperDetailsComponent

我想使用如下路由：

{
        path: 'distribution',
        loadChildren: () =>
            import('./modules/orders-distribution-module/orders-distribution.module').then((m) => m.OrdersDistributionModule),
    },

然后OrdersDistributionModule有子路线：

   {
        path: '',
        component: OrderDistributionComponent,
        children: [
          {
             path: 'orders',
              component: OrderDistributionWrapperComponent,
              children: [
                  path: 'details/:id',
                  component: OrderDistributionWrapperDetailsComponent
               ]
           }
        ]
    },

你怎么看？

我的问题是我尝试使用：

 children: [
   path: 'details/:id',
   component: OrderDistributionWrapperDetailsComponent
]

这意味着父组件OrderDistributionWrapperComponent应该有路由出口，但它没有。路线出口仅在 OrderDistributionComponent.

实际上我可以path: 'details/:id',在同一级别上移动path: 'orders'：

{
   path: 'orders',
   component: OrderDistributionWrapperComponent
},

{ 
   path: 'orders/details/:id',
   component: OrderDistributionWrapperDetailsComponent

}

但我不喜欢orders/details/:id作为单独的组件，而不是在主要实体内orders。而且我不在路线中添加重复名称' ----->orders/details/:id'

标签： angular

解决方案

由于OrderDetailsComponent在所有模块中都使用，因此建议创建一个共享模块并在所有模块中导入该共享模块。

共享模块应该声明和导出OrderDetailsComponent。

注意： 引入 Angular 模块是为了在运行时提供性能优势。模块是延迟加载的，因此第一次加载页面的时间大大减少。第一次加载后，只有需要的组件/模块才会在运行时加载。这里要注意的一个关键点是，由于在运行时加载需要时间，模块也会增加一点延迟。除非您在每个模块中都有许多组件，否则创建单独的模块是没有意义的。

我建议您仅在每个模块中有许多组件时才创建Distribution、Assigning和模块。Execution

推荐阅读