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

基利安·佩多莫·库贝洛

我的应用程序中具有以下层次结构:

app/
    app.module.ts
    app.routing.ts
    ...
    endpoints/
              endpoints.module.ts
              endpoints.service.ts
              endpoints.routing.ts
              ...
    indexes/
              indexes.module.ts
              indexes.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
    }
];

index.routing.ts

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

这很简单:当我调用/ endpoints /时,EndpointComponent被调用。/ indexes /和IndexesComponent相同。

现在,我想在索引模块中使用端点服务。我将其添加到我的indexs.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 {}
蜜糖

它在模块导入中的作用不大,而在路径覆盖中则是如此。在第一个示例中,您有一个明显的区别:不同子路径上的两个不同模块。

在第二个示例中,您说path: 'endpoints',然后您的惰性路由器为其添加了一条路由''(所有东西放在一起解析为/endpoints,然后模块导入另一''条路由,该路由具有相同的路径,因此端点也相同。

您确实应该添加从主应用程序组件延迟加载的两条路由。他们很懒,所以除非您实际呼叫这条路线,否则您不会节省任何额外的费用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在另一个应用程序无法获取子模块导入正确

如何将Git存储库转换为嵌套在另一个(父)Git存储库中的子模块?

将多个子模块折叠为一个Cython扩展

当两个子模块都在同一主模块中时,从另一个子模块访问该子模块

如何将具有子模块的git存储库合并到具有子树合并的另一个存储库中?

SonarQube:如何分析曾经是另一个项目子模块的项目?

在另一个模块中声明一个子模块/功能,该模块可由其他模块访问,但用户不可访问

如何更新一个子模块git?

如何从不同的子模块导入一个子模块?

如何从另一个子模块访问一个子模块的布局?

交叉引用链接到另一个子模块中的函数/类

将一个组件从模块导入到另一个模块的组件

运行另一个不同模块时,模块子模块的ImportError

Angular-如何将模块导入子模块?

Maven构建会跳过与另一个模块相关的子模块

如何在Maven项目中将spring-context从一个子模块导入到另一个子模块?

将git repo迁移到另一个repo的子模块

将python模块导入另一个目录

如何以角度将组件从一个模块导出和导入到其子模块

Maven:如何管理从一个子模块到另一个子模块的依赖关系

如何确定哪个模块是git中另一个模块的子模块?

如何将子模块更改推送到另一个存储库

添加文件夹将创建一个子模块

从另一个导入子模块

需要一个子目录而不是一个子模块

无法将参数从子CloudFormation模板发送到另一个子模板

Python将文件模块导入另一个

如何将模块用作独立 CLI 以及另一个模块 (API) 的子模块?

如何添加另一个 RSU 子模块?