Question

当前，我正在尝试使用两个模块创建一个Angular应用：mag-app和rpdr-fl。

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' }
];

问题是我如何处理rpdr-fl中的路由。我在代码中为许多常见对象创建了子模块，包括一个包含app-header组件的Core Module。最后，我创建了一个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 { }

app.component

@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时，我被带到基于Leagueing-routing.module的组件，这很好，但是我看不到应用程序头组件。使用？导航到各种延迟加载的子模块时，有没有一种方法可以拥有一个通用的NavBar标头？

编辑： Adding Repo Url

请注意，我最近在rpdr模块中创建了app.component.ts，因此我将不在回购中。

Answer 1

解决方案的主要问题（注释中未提及的次要问题除外）是如何使用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）。希望这对其他人有帮助。

带有懒惰子模块的延迟加载的模块未将AppComponent与navbar和router-outlet一起使用

1 个答案: