多个模块和角度 5 中的路由

Question

有人能告诉我在我的项目中使用多个模块时如何正确设置路由吗？ 我有 app.module 和courses.module，其中声明了一些组件。我想知道如何连接模块并在courses.module中正确编辑路由，这就是共享路由：“/courses/list”和“/courses/detail”

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//import { CoursesRoutingModule } from './components/courses/courses-routing.module';

const routes: Routes = [
  {
    path: 'courses',
    loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' 
  }
];

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

应用程序组件.html

<h1>App.component</h1>
<p>
    <button routerLink="/">HOME</button>
    <button routerLink="/courses">KURSY</button>
</p>
<router-outlet></router-outlet>

这是课程组件：

course.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CoursesComponent } from './courses.component';
import { CoursesDetailComponent } from './components/courses-detail/courses-detail.component';
import { CoursesListComponent } from './components/courses-list/courses-list.component';

const routes: Routes = [
//  {
//    path: 'courses',
//    loadChildren: '/src/app/components/courses/courses.module'
//  }
//  ,
//  {
//    path: 'courses/list',
//    component: CoursesListComponent,
//    outlet: 'courseslist'
//  }
];

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

课程.component.html：

<p>
    <button routerLink="/">HOME</button>
    <button routerLink="/courses/list">list</button>
    <button routerLink="/courses/detail">detail</button>
</p>

Answer 1

编辑 08/2019

将延迟加载模块语法改编为 angular 8 中引入的新的强类型语法。

02/2020 编辑：

此构造对 Angular 9 仍然有效。

解决方案

这是我如何做到的：

app.module.ts

import {ModuleRouting} from './app.routing';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        ModuleRouting,
        SubmoduleModule         
    ]
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';

const routes: Routes = [
    {path: 'submodule', loadChildren: () => import('app/submodule/submodule.module').then(m => m.SubmoduleModule)}
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);

子模块.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ModuleRouting} from './submodule.routing';

@NgModule({
    imports: [
        CommonModule,
        ModuleRouting
    ],
    declarations: [
        //...
    ]
})
export class SubmoduleModule {
}

子模块.routing.ts

import {RouterModule, Routes} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';

const routes: Routes = [
    {
        path: '',
        component: SomeComponent,
    },
    {
        path: 'other',
        component: SomeOtherComponent,
    }
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forChild(routes);

您还可以使用angular cli生成模块和路由文件，然后对其进行调整： （cd 到每个命令之前应创建文件的目录）

ng g m module --routing
ng g m submodule --routing

Answer 2

app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'courses', loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' }
    ]
  }
];

course.routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'list', component: CoursesListComponent}
    }
  }
];

我会这样做。 自己尝试一下，看看效果如何。