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

编译好。但现在，当我加载/索引/时，/ 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，然后模块导入另一个，具有相同的''路径，因此仍然是相同的端点。

你真的应该添加从主应用程序组件延迟加载的两个路由。他们很懒，所以除非你真的称之为这条路线，否则你不会保存任何额外费用。

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

1 个答案: