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，然后 that 模块导入了另一个模块，它具有相同的 '' 路径，所以仍然是相同的端点。

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

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

Angular: importing child module into another child module overwrites latter's routes

import

angular-routing

angular-module

angular

angular-router