[英]angular 5 routing with multiple modules
我在使用多个模块配置我的应用程序路由时遇到问题。 我想将我的应用程序分为多个模块,并在可能的情况下将它们全部路由到一个路由配置文件中。
我有4个模块:
<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>
我的main.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我会得到错误'router-outlet' is not a known element:
从MainComponent.ts。 我尝试使用模块并将其导入不同的位置,但是使其工作的唯一方法是在app.routing.ts中使用已定义的路由在as400screensModule中声明as400screensRoutes。
有没有一种方法只能在app.routing.ts中配置路由? 也许我已经使事情复杂化了,所以希望得到反馈,我正在以正确的方式配置路由。
进口RouterModule
到MainModule
。 由于您使用的路由器出口MainComponent
是一部分MainModule
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.