Question

我想做3个级别的路由： pages＆gt; firstlevel＆gt; secondlevel＆gt; firstlevel

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

网址 localhost：4200 / pages / first / second 有效，但当我想要去网址时： 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 { }

pages.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);

pages.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 { }

loadchildren在Angular4中不起作用？

1 个答案: