同一页面上的两个 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> 中，或者您将详细信息组件嵌入 'manually'，如 <artist-detail>。由于您尝试混合使用它们（子路由和手动嵌入模板），路由器抱怨找不到将子路由组件放入的出口。

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

同一页面上的两个 Angular2 组件

Two Angular2 components on the same page

angular2-template

angular2-routing

angular