typescript - Điều hướng các module tính năng với cùng bố cục cha trong angular

Tôi muốn sử dụng cùng một bố cục (được định nghĩa trong app.module.ts) cho các module tính năng khác nhau, mỗi module có routing riêng của nó. Và một bố cục đăng nhập/đăng ký riêng biệt sẽ không có menu bên, header và footer. Cho đến nay tôi đã thử điều này:

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

và một thành phần bố cục:

//../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>

Các tuyến bảng điều khiển nằm trong app.module.ts nhưng các mô-đun tồn kho và các mô-đun khác có các mô-đun và tuyến của riêng chúng như được hiển thị dưới đây:

//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 { }

và module khác:

//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 { }

nếu tôi gỡ bỏ bình luận cho component layout từ module inventory thì nó sẽ render lại component layout (tôi không muốn điều đó) tôi muốn sử dụng layoutComponent trong mọi module có routes riêng của nó và cho đến nay vẫn chưa làm được.

Câu trả lời #1

Trong AppModule của bạn, bạn có thể chuyển hướng đến FeaturesModule theo mặc định, module này sẽ có menu từ LayoutComponent, trong khi AuthGuard có thể chuyển hướng đến /login khi cần.

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

Trong FeaturesModule của bạn, các đường dẫn tính năng sẽ được hiển thị trong outlet của LayoutComponent:

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

Trong InventoryModule của bạn, bạn đặt tất cả các route con của module (các FeatureModule khác tương ứng). DashBoard phải được di chuyển sang FeaturesModule hoặc sang module riêng của nó.

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

Lưu ý rằng với cú pháp loadChildren đã cho, module được tham chiếu sẽ được tải lười. Nếu bạn muốn nó được tải đồng bộ, hãy xem câu trả lời này trên SO.