具有多个模块的 Angular 5 路由

Question

我在使用多个模块配置我的应用路由时遇到了问题。 如果可能，我想将我的应用程序分成许多模块，并将它们全部路由到一个路由配置文件中。

我有 4 个模块：

1. AppModule - 应用的默认根模块
2. Lo​​ginModule - 执行登录并在 LoginComponent 上声明的模块
3. MainModule - 一个共享模块，用于声明基本的应用布局组件，例如页眉、页脚、侧边菜单等。
4. As400screensModule - 该模块声明应该出现在应用布局中的组件，并通过 url 和 <router-outlet> 标签选择要加载的组件。

让我们从我的 app.routing.ts 文件开始

export const routes: Routes = [
  { path: '', component: LoginComponent, pathMatch: 'full' },
  { path: 'app', component: MainComponent, canActivate: [OLAuthGuard],
       children: [
        { path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent },
        { path: 'main-menu', component: MainMenuComponent },
        { path: 'inventory-management', component: InventoryManagementComponent },
        { path: 'items', component: ItemsComponent },
      ]
  },
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: [
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: []
})


export class AppRoutingModule {

}

我的app.component.html

<router-outlet></router-outlet>
<app-preloader></app-preloader>

首先，路由器应该进入登录页面，成功登录后导航到“/app/main-menu”，该页面应该使用 MainMenuComponent 从子路由加载。

当我想在 MainComponent 中使用 <router-outlet> 标签时，问题就开始了，它应该从不同的模块加载子组件。

我的 MainComponent.html

<app-header></app-header>
<div class="ol-body">
  <app-side-menu></app-side-menu>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>
<app-footer></app-footer>

我的 ma​​in.module.ts

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    As400screensModule,
    MfrpcModule
  ],
  declarations: [HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent, TestComponent, TestChildComponent],
  exports: [ HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent,TestComponent, TestChildComponent],
  providers: [],
  bootstrap: []
})

export class MainModule {

}

我的 as400screens.Module.ts

export const as400screensRoutes: Routes = [
  {path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent},
  {path: 'main-menu', component: MainMenuComponent},
  {path: 'inventory-management', component: InventoryManagementComponent},
  {path: 'items', component: ItemsComponent},
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forChild(as400screensRoutes)
  ],
  declarations: [
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent
  ],
  exports: [
    RouterModule,
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent],
  providers: [],
  bootstrap: []
})

export class As400screensModule {

}

我的 app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule, // default app routing module
    LoginModule,
    MainModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CommonModule,
    AngularWebStorageModule,
    NgbModule.forRoot(),
  ],
  exports: [],
  providers: [OLConfig, OLHttpService, OLUtils, OLAppService, OLAuthGuard, OLAuthGuardService, OLConstants],
  bootstrap: [AppComponent],
})

export class AppModule {
}

我的问题是我需要在 as400screensModule 中配置 as400screensRoutes，但是在 app.routing.ts 中我已经声明了路由 对于所有应用程序。 如果我删除 as400screensRoutes，我会从 MainComponent.ts 中得到错误 'router-outlet' is not a known element:。 我尝试使用模块并将它们导入不同的地方，但使其工作的唯一方法是在 as400screensModule 中声明 as400screensRoutes 并在 app.routing.ts 中使用已定义的路由。

有没有办法只在 app.routing.ts 中配置路由？ 也许我把事情复杂化了，所以希望得到反馈，我正在以正确的方式配置路由。

Answer 1

将RouterModule 导入到MainModule。因为您在MainComponent 中使用路由器插座，这是MainModule 的一部分