Angular：将子模块导入另一个子模块会覆盖后者的路由

Question

我的应用程序中有这个层次结构：

app/
    app.module.ts
    app.routing.ts
    ...
    endpoints/
              endpoints.module.ts
              endpoints.service.ts
              endpoints.routing.ts
              ...
    indexes/
              indexes.module.ts
              indexes.routing.ts
              ...

我的路由文件的包含：

app.routing.ts

...
export const AppRoutes: Routes = [{
    path: '',
    component: MainLayoutComponent,
    children: [{
            path: 'endpoints',
            loadChildren: './endpoints/endpoints.module#EndpointModule'
    },{
            path: 'indexes',
            loadChildren: './indexes/indexes.module#IndexModule'
    }
}];

endpoints.routing.ts

...
export const EndpointRoutes: Routes = [
    {    
        path: '',
        component: EndpointComponent
    }
];

indexes.routing.ts

...
export const IndexesRoutes: Routes = [
    {    
        path: '',
        component: IndexesComponent
    }
];

这很简单：当我调用 /endpoints/ 时，会调用 EndpointComponent。 /indexes/ 和 IndexesComponent 相同。

现在，我想在我的索引模块中使用端点服务。我将它添加到我的 indexes.module.ts 中，如下所示：

...
import { EndpointsModule } from '../endpoints/endpoints.module';
import { EndpointsService } from '../endpoints/endpoints.service';

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(IndexRoutes),
        EndpointsModule,
        ...
    ],
    declarations: [ 
        IndexComponent
    ],
    providers: [
        EndpointService
    ]
})

export class IndexModule {}

这编译得很好。但是现在，当我加载 /indexes/ 时，会显示 /endpoints/ 的视图。我猜它也在从端点模块导入路由，但我还不完全理解导入是如何工作的。主模块和端点模块文件如下所示（显示路由相关位，因为我认为与我的问题相关）：

app.module.ts

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

@NgModule({
    declarations: [
        AppComponent,
        MainComponent, 
        ...
    ],
    imports: [
        RouterModule.forRoot(AppRoutes),
        ...
    ],
    ...
        bootstrap: [AppComponent]
})
export class AppModule { }

endpoints.module.ts

...
import { EndpointRoutes } from './endpoints.routing';
...

@NgModule({
    ...
    imports: [

        RouterModule.forChild(EndpointRoutes),
        ...
    ],
})
export class EndpointModule {}

Answer 1

在模块导入中与其在路径覆盖中不同。在您的第一个示例中，您有一个明显的区别：不同子路径上的两个不同模块。

在你的第二个例子中，你说path: 'endpoints'，然后你的惰性路由器为''添加一个路由（所有东西放在一起，解析为/endpoints，然后是那个模块导入另一个具有相同 '' 路径的路径，因此仍然是相同的端点。

您确实应该添加从主应用程序组件延迟加载的两条路由。他们很懒，所以除非你真的调用这条路线，否则你不会节省任何额外的东西。