Question

我有app模块导入两个子模块：((HomeCategories)getSupportFragmentManager().findFragmentByTag("HomeTag")).setData(your_data)和PreparationModule。在GameModule的根路由中，我有准备工作＆＃39;延迟加载AppModule的端点。 PreparationModule（AppComponent的引导组件）html文件仅包含根路由器插座。 AppModule有自己的子路由，有两条子路由，并为PreparationComponent中的路由命名路由器出口。

我想要达到的目标是在路径＆＃39; /准备＆＃39; PreparationModule将显示在PreparationComponent路由器插座中。然后来自AppComponent的子路线将延迟加载并显示在PreparationModule中的命名路由器插座中，例如路径＆＃39; / prepare / intro＆＃39;。在路径＆＃39; / play＆＃39;我想从PreparationComponent加载GameComponent到GameModule路由器插座。 AppComponents暂时没有指定自己的路由。

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

修改

我得到的错误是：preparation.component.ts

app.module.ts

ERROR Error: Uncaught (in promise): TypeError: undefined is not a function

app.component.html

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

app.routing.ts

<router-outlet></router-outlet>

preparation.module.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);

preparation.component.html

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

preparation.routing.ts

<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>

带有子路由的Angular 6多个路由出口

0 个答案: