问题描述
关于Angular的一些代码结构问题。我正在尝试实现分屏设计，其中，左右根据不同的查询显示不同的数据。通常，左边指示要显示右边的数据。
例如：左侧将有一个艺术家列表。单击某个艺术家时，其专辑列表将显示在右侧。一种可行但不完全正确的方法如下：
一个可以访问URL参数的“屏幕一”组件。在此组件/模块内部，我们导入Artists组件和Projects组件。屏幕一个组件处理对Firestore的查询，并将查询传递给以下组件：
<div>
<app-artists [artistsArray]="artistsArray"></app-artists>
<app-albums [albumsArray]="albumsArray"></app-albums>
</div>
这很好。但是，这将出现在路线/artists上。单击艺术家时，路线将为/artists/:artistID。这里最棘手的部分是，在我的路由模块中，我现在有两条路由可以加载完全相同的模块。那是个问题吗？
路由
const routes: Routes = [
{
path: 'artists',loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),},{
path: 'artists/:artistID',];
解决方法
这不是问题，但建议拆分您的应用程序路由。假设您有一个包含3个大模块的AppModule。最好在每个大模块中都有主app-routing.module和route模块，然后再将其放在同一个app-routing.module中。
删除artist /：artistID，创建artist.routes.ts，将其从screenOneModule导入，然后将您的孩子放在创建的路线中
app-routing.module.ts
...
const routes: Routes = [
{
path: 'artists',loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),}
];
...
artists.routes.ts
...
export const routes: Routes = [
path: 'artists',children: [
{
path: ':artistID',pathMatch: 'full',component: ArtistsComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],declarations: [],exports: [RouterModule],providers: []
})
export class ArtistRoutes{}
screen-one.module.ts
...
imports: [
...
ArtistRoutes,...
]
...
嘿，您的建议不是问题。您还可以映射一系列路线：
const artistPaths: string[] = ['artist','artists/:artistID'];
const artistRoutes: Route[] = artistPaths.map((path) => ({path,loadChildren: () => null}));
然后：
- 将其放入路由数组：
routes.push(artistRoutes);
- 直接将其添加到数组定义中：
const routes: Routes = [
artistRoutes
];