4

我有导入两个子模块的应用程序模块：PreparationModule和GameModule. 在根路由中，AppModule我有延迟加载的“准备”端点PreparationModule。AppComponent的（引导组件AppModule） html 文件仅包含根路由器出口。PreparationModule有自己的子路由，带有两个子路由，并在 PreparationComponent 中为这些路由命名为路由器出口。

我想要实现的是在路径'/preparation'PreparationComponent上将显示在AppComponent路由器插座中。然后来自的子路由PreparationModule将被延迟加载并显示在命名路由器出口中PreparationComponent，例如路径'/preparation/intro'。在路径“/play”上，我想GameComponent从路由器插座加载。目前没有指定自己的路由。GameModuleAppComponentsGameModule

我在这里做错了什么？我想我用复杂的方式解释了它，但也许代码会告诉你更多。里面没有什么相关的app.component.ts（preparation.component.ts只是类声明），所以我跳过了它们。

编辑

我得到的错误是：ERROR Error: Uncaught (in promise): TypeError: undefined is not a function

app.module.ts

@NgModule({
  imports: [
    AppRouting,
    SharedModule,
    GameModule,
    PreparationModule
  ],
  declarations: [
   AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.html

<router-outlet></router-outlet>

app.routing.ts

// These goes inside main <router-outlet></router-outlet> in 
// AppComponent
const routes: Routes = [
  {
    path: 'preparation',
    component: PreparationComponent,
    loadChildren: './preparation/preparation.module#PreparationModule'
  },
  {
    path: 'play',
    component: GameComponent
  },
  {
    path: '',
    redirectTo: '/preparation',
    pathMatch: 'full'
  }
];

export const AppRouting = RouterModule.forRoot(routes);

准备模块.ts

@NgModule({
  imports:[
    PreparationRouting,
    SharedModule
  ],
  exports:[
    PreparationComponent,
    SettingsComponent,
    IntroComponent,
    FooterComponent
  ],
  declarations:[
    PreparationComponent,
    SettingsComponent,
    IntroComponent,
    FooterComponent
  ]
})
export class PreparationModule {
}

准备.component.html

<div id="main-container" fxFlex="80" fxFlex.xs="94" fxFlexOffset="10" fxFlexOffset.xs="3"
     fxLayout="column" fxFlexAlign="center">

  <div fxFlex="4"></div>
  <div fxFlex="92" fxLayout="row" fxLayoutAlign="center center">
    <div fxFlex.gt-md="45" fxFlex.md="60" fxFlex.sm="85" fxFlex.xs="100">
      <router-outlet name="preparation"></router-outlet>
    </div>
  </div>
  <app-footer fxFlex="4"></app-footer>
</div>

准备路由.ts

const routes: Routes = [
  {
    path: 'intro',
    component: IntroComponent,
    outlet: 'preparation'
  },
  {
    path: 'settings',
    component: SettingsComponent,
    outlet: 'preparation'
  }
];

export const PreparationRouting = RouterModule.forChild(routes);
4

0 回答 0