具有相同父布局角度的特征模块布线 [英] Feature modules routing with same parent layout angular

问题描述

我想对不同的功能模块使用相同的布局(在 app.module.ts 中定义)，每个模块都有自己的布线.还有一个单独的登录/注册布局，其中没有侧边菜单，页眉和页脚.到目前为止，我已经尝试过:

I want to use same layout (that is defined in app.module.ts) for different feature modules, each module has its own routing. And a separate login/register layout that would not have side menu, header and footer. So far i tried this:

//../app/app.component.html
<router-outlet></router-outlet> // here i want login and layout view.

和布局组件:

//../app/layout.component.html
<header></header>
<side-menu></side-menu>
<router-outlet></router-outlet> // here i want layout views that would have side menu with them e.g. dashboard, inventory etc
<footer></footer>

仪表板路线位于app.module.ts中，但是清单模块和其他模块具有自己的模块和路线，如下所示:

dashboard routes are in app.module.ts but the inventory and other modules has there own modules and routes as shown below:

//app.module.ts
const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', component: DashboardOne},
            { path: 'dashboardOne', component: DashboardOne},
            { path: 'dashboardTwo', component: DashboardTwo}
        ],
        canActivate: [AuthGuard]
    }
];    
@NgModule({
  declarations: [
    AppComponent,
    DashboardOneComponent,
    DashboardTwoComponent,
    LoginComponent,
    LayoutComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    InventoryModule,
    WarehouseModule,
    UserModule,
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

和其他模块:

//inventory.module.ts
const appRoutes: Routes = [
    {
        path: 'inventory',
        //component: LayoutComponent,
        children: [
            { path: '', component: InventoryOne},
            { path: 'inventoryOne', component: InventoryOne},
            { path: 'inventoryTwo', component: InventoryTwo}
        ],
        canActivate: [AuthGuard]
    }
];
@NgModule({
  declarations: [
    AppComponent,
    InventoryOneComponent,
    InventoryTwoComponent,
    //LayoutComponent // want to use this layout in other modules too
  ],
  imports: [
    RouterModule.forChild(
      appRoutes
    ),
  ],
  providers: [],
})
export class InventoryModule { }

如果我从库存模块中删除了布局组件的注释，它将重新渲染布局组件(我不想要).我想在每个有其自己的路线的模块中使用layoutComponent，但到目前为止无法这样做.

if i remove the comment for layout component from inventory module it re-renders the layout component (I don't want that) i want to use layoutComponent in every module that has its own routes and so far unable to do so.

推荐答案

默认情况下，您可以在AppModule中重定向到FeaturesModule，该菜单具有LayoutComponent中的菜单，而AuthGuard可以重定向到/login必要时.

In your AppModule you can redirect to the FeaturesModule by default, which will have the menu from the LayoutComponent, whereas the AuthGuard can redirect to /login when needed.

const appRoutes: Routes = [
  {        
    path: '',
    loadChildren: '../<insertyourpath>/features.module#FeaturesModule',
    canActivate: [AuthGuard]
  },
  {
     path: 'login',
     component: LoginComponent
  }
];

在FeaturesModule中，您将在LayoutComponent的出口中呈现要素路径:

In your FeaturesModule you'll have the feature paths rendered in the outlet of the LayoutComponent:

const featureRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {        
        path: 'inventory',
        loadChildren: '../<insertyourpath>/inventory.module#InventoryModule'
      }
    ]
  }
];

在您的InventoryModule中，放置了模块的所有子路由(分别是其他FeatureModule). DashBoard必须移至FeaturesModule或其自己的模块.

In your InventoryModule you put all the module's child routes (other FeatureModules respectively). The DashBoard has to be moved to the FeaturesModule or to its own module.:

const inventoryRoutes: [
  { path: '', component: InventoryOne},
  { path: 'inventoryOne', component: InventoryOne},
  { path: 'inventoryTwo', component: InventoryTwo}
];

请注意，使用给定的loadChildren语法，将延迟加载引用的模块.如果您希望同步加载它，请查看此 SO答案.

Note that with the given loadChildren syntax, the referenced module will be lazy loaded. If you want it to be loaded synchronously check out this SO answer.

这篇关于具有相同父布局角度的特征模块布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！