Angular中模块之间的路由

Question

我正在构建简单的角度应用程序。有学生和教师两个模块。这是我的项目的组织方式。

首先，当用户输入应用程序时，我让他选择他是老师还是学生。

根据用户的身份，将其重定向到相应的模块。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { StudentModule } from './student/student.module';
import { TeacherModule } from './teacher/teacher.module';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'student',
        loadChildren: () => StudentModule
    },
    {
        path: 'teacher',
        loadChildren: () => TeacherModule
    }
];

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


  } 

这是我的app.routing.ts档案。

我的问题是当我重定向到模块时，我想在那些模块中的组件之间进行路由。我应该<router-outlet>在每个模块中添加另一个，还是只能<router-outlet>在中添加一个AppModule？

如果我要添加另一个，我应该<router-outlet>如何为那些模块编写路由器类。

Answer 1

Angular v8、v9 及更高版本的延迟加载方式

https://angular.io/guide/lazy-loading-ngmodules

// In app module route
{
 path: 'your-path',
 loadChildren: () => import('./path-to/your.module').then(m => m.YourModule)
}

// in your module
const yourRoutes: Routes = [
  { path: '',  component: YourComponent }
];

export const yourRouting = RouterModule.forChild(yourRoutes);

@NgModule({
  imports: [
   yourRouting
  ],
  declarations: [
    YourComponent
  ]
})
export class YourModule{
}

Angular v7、v6 及以下的延迟加载方式

// In app module route
{
 path: 'your-path',
 loadChildren: 'app/your.module#YourModule'
}

// in your module
const yourRoutes: Routes = [
  { path: '',  component: YourComponent }
];

export const yourRouting = RouterModule.forChild(yourRoutes);

@NgModule({
  imports: [
   yourRouting
  ],
  declarations: [
    YourComponent
  ]
})
export class YourModule{
}

不是懒加载方式

只需YourModule在主模块中导入，如果路由没有延迟加载，它就会工作。

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    YourModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

花一些时间阅读路由文档https://angular.io/guide/router

检查这个答案/sf/answers/2749899421/