同一页面上的两个Angular2组件

Question

我不得不说，我刚开始学习Angular2，发现它非常有趣。

今天我遇到了一个问题，我的路由配置如下：

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

这个想法是在左侧展示艺术家列表（ArtistComponent），当点击时，在右侧打开详细视图（ArtistsDetailComponent）。

ArtistsComponent 模板中有<router-outlet>，所以当导航到 /artists/:id 时，我确实可以在左侧看到文章列表，在右侧看到详细视图（在此 router-outlet 中）。

一切都很好，除了我需要让这两个组件相互通信，这样当我在详细视图中进行更改时，列表中的内容也应该被更改。

当我搜索时，发现应该使用组件选择器和变量映射信息：

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

但是然后我收到一个错误，说我没有router-outlet，Angular不知道在哪里放置ArtistsDetailComponent视图...所以专家们，请帮忙解决吧！:)

- Mr. M

---

请您复制并粘贴完整的错误信息？ - Mark Langer

这似乎是你需要使用多个outlets的时候。不确定这是否正是你要寻找的，而且目前处于令人困扰的实验阶段，但值得你花些时间去研究一下。 - Jarod Moser

Answer 1

有两种相互矛盾的方法。要么使用子路由，此时详细组件应嵌入到<router-outlet>中，要么手动嵌入详细组件，如<artist-detail>。由于您试图混合使用它们(子路由和手动嵌入模板)，路由器会抱怨找不到输出口将子路由组件放入其中。

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

- smyk

---

谢谢，这帮助我让它正常工作了。所以我放弃了子路由（但仍然使用相同类型的URL path: 'artists/:id'），手动嵌入 <artist-detail> 组件。现在 artists/:id 路径正在使用 ArtistComponent，通过 <artist-detail> 在列表旁边显示艺术家的详细信息。我之前尝试过取消子路由，但是我无法想出如何在同一页上同时显示列表和详细信息 - 我需要做的就是让 artists/:id 路由使用 ArtistsComponent（列表）而不是 ArtistsDetailComponent（详细信息）。#尴尬 - Mr. M