gpt4 book ai didi

angular - loadchildren 在 Angular4 中不起作用?

转载 作者:太空狗 更新时间:2023-10-29 19:34:39 25 4
gpt4 key购买 nike

我想像这样进行 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() {
}

}

最佳答案

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

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

关于angular - loadchildren 在 Angular4 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43493177/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com