angular - 如何路由到不同模块中的组件？

Question

CharacterComponent 与 MenuModule 位于不同的 Module 中。我不知道路由到不同模块中的组件的正确方法。我希望能够切换 <router-outlet></router-outlet> 的目标到不同模块中的组件。据我所知，这是行不通的。

menu.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpClientModule } from '@angular/common/http';
    import { RouterModule } from '@angular/router';

    import { MenuComponent } from './menu.component';
    import { CharacterComponent } from '../character/character.component';

    @NgModule({
      declarations: [
        MenuComponent,
        CharacterComponent
      ],
      imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
          { path: '', component: CharacterComponent, pathMatch: 'full' }
       ])
      ],
      providers: [],
      bootstrap: [MenuComponent]
    })
    export class MenuModule { }

Answer 1

这是一个基本示例，但请确保将 AppRoutingModule 导入 AppModule(未显示)并将 LoginRoutingModule 导入 LoginModule(未显示)。否则它不会工作。还要注意每个路由模块中的 forRoot 和 forChild 方法。在这种情况下，如果用户转到 localhost:4200，它将重定向到 localhost:4200/start 并加载 LoginComponent。如果您有任何问题，请告诉我。

** AppRoutingModule **

const routes: Routes = [
  {
    path: '',
    redirectTo: 'start',
    pathMatch: 'full'
  },
  {
    path: 'start',
    loadChildren: 'app/modules/routes/login/login.module#LoginModule'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

** 登录路由模块 **

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    redirectTo: 'login'
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ],
  providers: []
})
export class LoginRoutingModule {}