angular - 带有延迟子模块的延迟加载模块不使用带有导航栏和路由器出口的 AppComponent
问题描述
目前,我正在尝试创建一个包含两个模块的 Angular 应用程序:mag-app 和 rpdr-fl。
应用程序路由.module.ts
const routes: Routes = [
{ path: '', loadChildren: './mag-app/mag-app.module#MagAppModule' },
{ path: 'rpdr-fl', loadChildren: './rpdr-fl/rpdr-fl.module#RpdrFlModule' }
];
问题是我如何处理 rpdr-fl 中的路由。我在我的代码中为许多常见对象创建了子模块,包括一个包含 app-header 组件的核心模块。最后,我创建了一个 AppComponent 作为 RPDR-FL 模块的登录页面。
@NgModule({
imports: [
CommonModule,
StoreModule.forRoot(reducers, { metaReducers }),
!environment.production ? StoreDevtoolsModule.instrument() : [],
NgbModule,
EffectsModule.forRoot([AppEffects]),
CoreModule,
RpdrFLRoutingModule,
DraftModule,
DraftRoutingModule,
LeagueModule,
LeagueRoutingModule,
QueensModule,
QueensRoutingModule,
TeamModule,
TeamRoutingModule,
UserModule,
UserRoutingModule,
WeeklyResultsModule,
WeeklyResultsRoutingModule
],
declarations: [
AppComponent,
LoginComponent,
PageNotFoundComponent,
],
bootstrap: [AppComponent]
})
export class RpdrFlModule { }
rpdr-fl-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'league', pathMatch: 'full' },
{ path: 'draft', loadChildren: './draft/draft.module#DraftModule' , outlet:'approuter' },
{ path: 'league', loadChildren: './league/league.module#LeagueModule',},
{ path: 'team', loadChildren: './team/team.module#TeamModule' },
{ path: 'user', loadChildren: './user/user.module#UserModule' },
{ path: 'meet-the-queens', loadChildren: './queens/queens.module#QueensModule' },
{ path: 'weekly-results', loadChildren: './weekly-results/weekly-results.module#'},
{ path: 'login', component: LoginComponent },
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class RpdrFLRoutingModule { }
应用程序组件
@Component({
selector: 'rpdr-fl-app',
template: `
<app-header></app-header>
<router-outlet name="approuter"></router-outlet>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
问题是当我尝试访问http://localhost:4200/rpdr-fl/league时,我被带到了一个基于 League-routing.module 的组件,这很好,但我没有看到该应用程序-头组件。有没有办法在使用导航到各种延迟加载的子模块时拥有一个通用的 NavBar 标题?
编辑: 添加回购网址
注意我最近在 rpdr 模块中创建了 app.component.ts,所以我不会在 repo 中。
解决方案
我的解决方案的主要问题(除了评论中提到的小问题)是我如何使用 RPDR-FL 模块组织路线。
更新了 app.module.ts
import { AppRoutingModule } from './app-routing.module';
import { RpdrFlModule } from './rpdr-fl/rpdr-fl.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RpdrFlModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
更新了 app-routing.module.ts
const routes: Routes = [
{ path: '', loadChildren: './mag-app/mag-app.module#MagAppModule' },
//{ path: 'rpdr-fl', loadChildren: './rpdr-fl/rpdr-fl.module#RpdrFlModule' } This path is no longer being used since the RpdrFlModule imported now
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
更新了 rpdr-fl.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { EffectsModule } from '@ngrx/effects';
import { RpdrFLRoutingModule } from './rpdr-fl-routing.module';
import { CoreModule } from './core/core.module';
import { AppComponent } from './app/app.component';
import { PageNotFoundComponent } from './core/containers/page-not-found/page-not-found.component'
import { LoginComponent } from './auth/components/login/login.component';
import { reducers, metaReducers } from './reducers';
import { environment } from '../../environments/environment';
import { AppEffects } from './app.effects';
@NgModule({
imports: [
CommonModule,
StoreModule.forRoot(reducers, { metaReducers }),
!environment.production ? StoreDevtoolsModule.instrument() : [],
NgbModule,
EffectsModule.forRoot([AppEffects]),
CoreModule,
RpdrFLRoutingModule,
],
declarations: [
AppComponent,
LoginComponent,
PageNotFoundComponent,
],
bootstrap: [AppComponent]
})
更新了 rpdr-fl-routing.module.ts
const routes: Routes = [
{ path: 'rpdr-fl', component: AppComponent, children: [
{ path: 'draft-central', loadChildren: './draft/draft.module#DraftModule'},
{ path: 'league', loadChildren: './league/league.module#LeagueModule',},
{ path: 'teams', loadChildren: './team/team.module#TeamModule' },
{ path: 'user', loadChildren: './user/user.module#UserModule' },
{ path: 'meet-the-queens', loadChildren: './queens/queens.module#QueensModule' },
{ path: 'weekly-results', loadChildren: './weekly-results/weekly-results.module#WeeklyResultsModule'},
{ path: '', redirectTo:'league', pathMatch: 'full'},
{ path: 'login', component: LoginComponent }
]
},
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
更新了 app.component.ts
@Component({
selector: 'rpdr-fl-app',
template: `
<app-header></app-header>
<router-outlet></router-outlet>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
所以基本上,我使用 RPDR-FL 应用程序中的 AppComponent 作为“rpdr-fl”路线的登陆组件。不幸的是,作为解决方案的一部分,我不得不导入 RPDR-FL 模块而不是延迟加载它(请参阅 app.module 和 app-routing.module)。希望这对其他人有帮助。
推荐阅读
- reactjs - 从 ApolloClient 的请求中获取 clientState 数据以用于 operation.setContext 反应 apollo graphql
- haskell - 迭代地构建 FGL 图删除边
- html - 定位页脚问题
- windows - 将数字批量回显到文本文件
- recursion - 从 C 代码到 MIPS 的递归斐波那契数列
- haproxy - HAProxy 超时保持活动与超时客户端
- python - 从网站动态解析时处理表中的非浮点数和 Nan 值
- amazon-web-services - AWS CodePipeline 将 Spring Boot 应用程序部署到 Elastic BeansTalk
- node.js - 在 Heroku 上部署 Node.js 错误:![remote denied] master -> master (pre-receive hook denied)
- node.js - 数组在 Nodejs 中使用 async 和 await 不返回任何内容