Question

CharacterComponent与MenuModule在不同的模块中。我不知道路由到其他模块中组件的正确方法。我希望能够将<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

建议将“ CharacterComponent”移动到共享模块并导出。在菜单模块中，您可以导入sharedmodule。

在菜单模块中，您可以创建一个包含CharacterComponent作为子组件的组件。现在，您可以为新创建的组件创建路线。

Answer 2

答案，由里卡多https://angular.io/guide/lazy-loading-ngmodules提供

也https://dev.to/saigowthamr/how-to-implement-lazy--loading-in-angular-6-3ple

Answer 3

这是一个基本示例，但请确保将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 {}

** LoginRoutingModule **

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

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

如何路由到其他模块中的组件？

3 个答案: