Angular 角度-对多条路径使用同一模块

这是一个关于Angular的代码结构问题。我正在尝试实现一种分屏设计，其中左侧和右侧根据不同的查询显示不同的数据。左侧通常指示显示右侧的哪些数据

例如：左边将有一个艺术家列表。当点击艺术家时，他们的专辑列表将出现在右边。一种行之有效但感觉不太正确的方法是：

可以访问URL参数的“screen one”组件。在这个组件/模块中，我们导入美术师组件和项目组件。screen one组件处理对Firestore的查询，并将其交给以下组件：

<div>
    <app-artists [artistsArray]="artistsArray"></app-artists>
    <app-albums [albumsArray]="albumsArray"></app-albums>
</div>

---

嘿，你的建议不是问题。您还可以映射一系列路线：

const artistPaths: string[] = ['artist', 'artists/:artistID'];
const artistRoutes: Route[] = artistPaths.map((path) => ({path, loadChildren: () => null}));

然后：

将其推入routes阵列：

直接将其添加到数组定义中：

---

这不是问题，但建议拆分应用程序路径。假设您有一个包含3个大模块的AppModule。最好为每个大模块设置主app-routing.module和路由模块，然后将其设置在同一app-routing.module中

---

删除艺术家/：artistID，创建artists.routes.ts，从screenOneModule导入它，并将您的孩子放入创建的路线中

应用程序路由.module.ts

...
const routes: Routes = [
  {
    path: 'artists',
    loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),
  }
];
...

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

...
imports: [
    ...
    ArtistRoutes,
    ...
]
...

艺术家.路线.ts

...
const routes: Routes = [
  {
    path: 'artists',
    loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),
  }
];
...

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

...
imports: [
    ...
    ArtistRoutes,
    ...
]
...

屏幕一.module.ts

...
const routes: Routes = [
  {
    path: 'artists',
    loadChildren: () => import('./screens/screen-one/screen-one.module').then(mod => mod.ScreenOneModule),
  }
];
...

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

...
imports: [
    ...
    ArtistRoutes,
    ...
]
...

---

删除艺术家/：artistID，创建artists.routes.ts，从screenOneModule导入它，并将您的孩子放入创建路线Hanks！-你能在回答中证明这一点吗？当然，让我们看看它是否有效