1

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

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

可以访问 URL 参数的“screen one”组件。在这个组件/模块中，我们导入 Artists 组件和 Projects 组件。屏幕一个组件处理对 Firestore 的查询并将它们传递给这些组件：

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

这工作得很好。但是，这将出现在 route 上/artists。当点击艺术家时，路线将是/artists/:artistID。这里棘手的部分是，在我的路由模块中，我现在有两条路由加载完全相同的模块。这是一个问题吗？路由

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

2 回答 2

1

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

删除artist/:artistID，创建artist.routes.ts，从你的screenOneModule中导入，然后把你的孩子放到创建的路由中

应用程序路由.module.ts

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

艺术家.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,
    ...
]
...
于 2020-11-06T11:11:31.250 回答
0

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

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

然后：

  1. 将其推送到 routes 数组中：
routes.push(artistRoutes);
  1. 直接在数组定义中添加：
const routes: Routes = [
  artistRoutes  
];
于 2020-11-06T10:51:06.383 回答