时间戳

首页 > 解决方案 > Angular惰性路由忽略父路径

angular - Angular惰性路由忽略父路径

问题描述

我正在使用 Angular 6.1，并尝试使用延迟路由设置应用程序模块和功能模块（称为实体模块）。我想创建一个路由/entities/list，链接到我的实体模块中的一个组件。但我无法让这条路线工作。相反，当我导航到/list时，将显示该组件。为什么我的路由忽略了父“ /entities ”路径？

app.module.ts：

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {BrowserModule} from '@angular/platform-browser';
import {EntitiesModule} from './entities/entities.module';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [AppRoutingModule, BrowserModule, EntitiesModule],
    providers: []
})

export class AppModule {}

应用程序路由.module.ts：

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

const routes: Routes = [
    {path: 'entities', loadChildren: './entities/entities.module#EntitiesModule'},
    {path: '', redirectTo: '', pathMatch: 'full'}
];

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

export class AppRoutingModule {}

app.component.ts：

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

@Component({
    selector: 'app-root',
    template: 'app <router-outlet></router-outlet>'
})

export class AppComponent {}

实体/实体.module.ts：

import {NgModule} from '@angular/core';
import {EntitiesRoutingModule} from './entities-routing.module';
import {EntitiesComponent} from './entities.component';

@NgModule({
    declarations: [EntitiesComponent],
    imports: [EntitiesRoutingModule]
})

export class EntitiesModule {}

实体/实体-routing.module.ts：

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {EntitiesComponent} from './entities.component';

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

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

export class EntitiesRoutingModule {}

实体/实体.component.ts：

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

@Component({
    selector: 'app-entities',
    template: 'entities'
})

export class EntitiesComponent {}

我还尝试使用以下方法在实体模块中定义路由，但组件仍将显示为导航到/list，而不是导航到/entities/list。

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

我究竟做错了什么？任何帮助表示赞赏！

标签： angulartypescript

解决方案

您正在尝试进行延迟加载。但是，您正在进行急切加载。

app.module.ts在行中：

进口：[AppRoutingModule，BrowserModule，EntitiesModule]，

正在加载实体模块。从那里删除它以进行延迟加载，它应该可以工作。

推荐阅读