如何将特征模块的途径声明为另一个组成部分的孩子？

发布于 2025-02-03 07:23:35 字数 970 浏览 4 评论 0原文

我正在重构我的Angular应用程序。我的app-routing.module.ts有两个主要途径：

const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {path: "", component: MainComponent, canActivate: [AuthGuard],children: [
    {path: "orders", component: OrderComponent, children:[...]
   ]},
  
];

现在，我为新创建的ordermodule创建了一个路由模块，

// in order-routing.module.ts
const routes = [
    {path: "orders", component: OrderComponent, children:[...]
]

现在我可以删除app中的路由-routing.module.ts，

const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {path: "", component: MainComponent, canActivate: [AuthGuard],children: []},
  
];

但在mainComponent中，我有一个＆lt; router-outlet＆gt;＆lt;/router-outlet我想加载所有功能组件，但因此，我必须以某种方式将路由声明为子路由，但是如果每个功能模块都有多个路由模块，该怎么办？

原文

I am refactoring my Angular App. My app-routing.module.ts has two main routes:

const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {path: "", component: MainComponent, canActivate: [AuthGuard],children: [
    {path: "orders", component: OrderComponent, children:[...]
   ]},
  
];

Now, I created a routing module for the newly created OrderModule

// in order-routing.module.ts
const routes = [
    {path: "orders", component: OrderComponent, children:[...]
]

now I could remove the route in app-routing.module.ts

const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {path: "", component: MainComponent, canActivate: [AuthGuard],children: []},
  
];

but in the MainComponent I have a <router-outlet></router-outlet where I want to load all feature components but therefore I have to somehow declare the routes as child routes but how would I do that if I have multiple routing modules for each feature module?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长亭外，古道边 2025-02-10 07:23:35

假设您在order> order> order.module.ts中具有ordermodule，并且在order>订单订购中定义的路由中导入order> order> order> order> order code>。 Module.ts

然后您可以将app-routing.module.ts更新为lazy load thit the Module：

// in order-routing.module.ts
const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {
      path: "", 
      component: MainComponent, 
      canActivate: [AuthGuard],
      loadChildren: () => import('../order/order.module').then((m) => m.OrderModule)
    },
  
];

Assuming you have an OrderModule in order.module.ts and inside you import the OrderRoutingModule with the routes defined in order-routing.module.ts

then you could update app-routing.module.ts to lazy load that module like this:

// in order-routing.module.ts
const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {
      path: "", 
      component: MainComponent, 
      canActivate: [AuthGuard],
      loadChildren: () => import('../order/order.module').then((m) => m.OrderModule)
    },
  
];

回复收藏 0 原文

失去的东西太少 2025-02-10 07:23:35

利用懒惰加载，一旦用户达到特定路由，这些功能模块将被加载。

app-routing.module.ts

const orderModule = () => import('..../order.module.ts').then(m => m.OrderModule);
const otherFeatureModule = () => import('.../feature1.module').then(m => m.FeatureModule);

const routes: Routes = [
  {
     path: "login", 
     component: LoginComponent, 
     canActivate: [IsNotLoggedGuard]
  },
  {  path: "", 
     component: MainComponent, 
     canActivate: [AuthGuard],
     children: [
       {
         path: 'order', 
         loadChildren: orderModule
       },
       {
         path: 'feature1',
         loadChildren: otherFeatureModule
       }
     ]
  }
];

主组件

<!-- your main content -->
<router-outlet></router-outlet> // here will be displayed 
                                // order and other features 
                                // components

Make use of lazy-loading, these feature modules will be loaded once the user hits a particular route.

app-routing.module.ts

const orderModule = () => import('..../order.module.ts').then(m => m.OrderModule);
const otherFeatureModule = () => import('.../feature1.module').then(m => m.FeatureModule);

const routes: Routes = [
  {
     path: "login", 
     component: LoginComponent, 
     canActivate: [IsNotLoggedGuard]
  },
  {  path: "", 
     component: MainComponent, 
     canActivate: [AuthGuard],
     children: [
       {
         path: 'order', 
         loadChildren: orderModule
       },
       {
         path: 'feature1',
         loadChildren: otherFeatureModule
       }
     ]
  }
];

main-component

<!-- your main content -->
<router-outlet></router-outlet> // here will be displayed 
                                // order and other features 
                                // components

回复收藏 0 原文

~没有更多了~