angular - loadchildren 在 Angular4 中不起作用？

Question

我想像这样进行 3 级路由:pages>firSTLevel>secondlevel>thirdlevel

但是 loadchildren 不加载 secondlevel.module 的路由。

url localhost:4200/pages/first/second 有效但 当我想转到 url 时:localhost:4200/pages/first/second/third 它不起作用。

这是我的文件夹:

pages
    |pages.component.ts
    |pages.routing.ts
    |pages.module.ts
    |firstlevel
               |firstlevel.module.ts
               |secondlevel

                           |secondlevel.component.ts
                           |secondlevel.module.ts
                           |thirdlevel
                                      |thirdlevel.component.ts
                                      |thirdlevel.component.html

我的代码:

pages.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DirectivesModule } from '../theme/directives/directives.module';
import { PipesModule } from '../theme/pipes/pipes.module';
import { routing } from './pages.routing';
import { PagesComponent } from './pages.component';




@NgModule({
  imports: [
    CommonModule,
    DirectivesModule,
    PipesModule,
    routing
  ],
  declarations: [ 
    PagesComponent
  ]
})
export class PagesModule { }

页面.routing.ts:

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

import { PagesComponent } from './pages.component';


export const routes: Routes = [
    {
        path: '', 
        component: PagesComponent,
        children:[

            { path:'', redirectTo:'dashboard', pathMatch:'full' },
            { path: 'first', loadChildren: 'app/pages/firstlevel/firstlevel.module#FirstLevelModule'}
        ]
    }
];

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

页面.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'page',
  template: '<router-outlet></router-outlet>'
})
export class PagesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

firSTLevel.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DirectivesModule } from '../../theme/directives/directives.module';
import { SecondLevelComponent } from './second-level/second-level.component';


export const routes = [
  { path: '', redirectTo: 'second', pathMatch: 'full'},
  { path: 'second', loadChildren: 'app/pages/firstLevel/secondlevel/secondLevel.module#SecondLevelModule', data: { breadcrumb: 'second' } }

];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
  declarations: [

  SecondLevelComponent]
})
export class FirstLevelModule { }

secondlevel.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DirectivesModule } from '../../../theme/directives/directives.module';
import { SecondLevelComponent } from './second-level.component';
import { ThirdlevelComponent } from './thirdlevel/thirdlevel.component';


export const routes = [
  { path: '', redirectTo: 'third', pathMatch: 'full'},
  { path: 'third', component: ThirdlevelComponent, data: { breadcrumb: 'third' } },

];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
  declarations: [

  SecondLevelComponent,

  ThirdlevelComponent]
})
export class SecondLevelModule { }

secondlevel.component.ts:

import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'second',
      template: '<router-outlet></router-outlet>'
    })
    export class SecondLevelComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }

    }

Answer 1

它非常困惑，但我会尝试了解您的项目中的内容。试试这个:

thirdlevel.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DirectivesModule } from '../../../theme/directives/directives.module';
import { SecondLevelComponent } from './../second-level.component';
import { ThirdLevelComponent } from './thirdlevel.component';    

export const routes = [
  { path: '', redirectTo: 'third', pathMatch: 'full'},
  { path: 'third', component: ThirdLevelComponent, data: { breadcrumb: 'third' } },

];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
  declarations: [

  SecondLevelComponent,

  ThirdlevelComponent
]
})
export class ThirdLevelModule { }