同一页面上有两个Angular2组件

Question

我不得不说我刚开始研究Angular2，看起来很有趣。

今天我偶然发现了这个问题，我配置了这样的路线：

{
    path: 'artists',
    component: ArtistComponent,
    children: [
        { path: ':id', component: ArtistsDetailComponent },
        { path: '', component: ArtistsHomeComponent },
    ]
},

想法是在左侧显示艺术家列表（ArtistComponent），点击后，会在右侧打开此详细视图（ArtistsDetailComponent）。

ArtistsComponent模板有，所以当导航到/ artists /：id时，我确实看到左侧的文章列表和右侧的详细视图（在此路由器插座中）。

除了我需要让这两个组件相互通信之外，一切都很好，所以当我在详细视图中进行更改时，应该在列表中进行更改。

当谷歌搜索时，我看到我应该将组件选择器与变量映射信息一起使用：

<artist-detail [artist]="selectedArtist"></artist-detail>

但是我得到一个错误，说我没有路由器插座，Angular不知道在哪里放ArtistsDetailComponent视图......

所以专家，请帮忙......！ ：）

Answer 1

有两种相互矛盾的方法。您可以使用子路由，在这种情况下，详细信息组件应嵌入<router-outlet>，或者您将详细信息组件“手动”嵌入<artist-detail>。由于您尝试将它们混合在一起（子路径和手动嵌入模板中），路由器抱怨它无法找到将子路径组件放入的插座。

因此，您要么放弃子路由，然后您可以使用[]语法传递参数，或者您坚持使用子路由，然后详细信息组件应从路由参数中提取ID并收集详细信息。您如何收集细节取决于您的型号。我将应用程序状态保留在Redux中，并从那里获取。您也可以使用共享服务。