angular - 同一页面上的两个 Angular2 组件

Question

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

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

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

想法是在左侧显示艺术家列表(ArtistComponent)，单击时，将在右侧打开此详细 View (ArtistsDetailComponent)。

ArtistsComponent 模板包含在其中，因此当导航到/artists/:id 时，我确实看到了左侧的文章列表和右侧的详细 View (在此路由器导出中)。

一切都很好，只是我需要让这两个组件相互通信，因此当我在详细 View 中进行更改时，应该在列表中进行更改。

在谷歌搜索时，我发现我应该将组件选择器与变量映射信息一起使用:

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

但随后我收到一条错误消息，说我没有路由器导出，并且 Angular 不知道将 ArtistsDetailComponent View 放在哪里...

请各位专家帮忙...! :)

Answer 1

有两种相互矛盾的方法。要么使用子路由，在这种情况下，详细信息组件应嵌入到 <router-outlet> 中，或者您“手动”嵌入详细信息组件，如 <artist-detail> 。由于您尝试混合它们(子路由和手动嵌入到模板中)，路由器提示它找不到将子路由组件放入的导出。

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