在同一页上的两个Angular2组件

我不得不说我刚开始研究Angular2，它看起来很有趣。在同一页上的两个Angular2组件

我对这个问题今天偶然在那里我可以这样来配置路线：打开

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

想法是在左边显示艺术家列表（ArtistComponent），并点击时，会出现此详细视图（ArtistsDetailComponent）在右侧。

ArtistsComponent模板有它，所以当浏览到/ artists /：id我真的看到左侧的文章列表和右侧的详细视图（在这个router-outlet）。

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

google搜索的时候，我看到，我应该用变量映射信息一起使用组件选择：

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

但后来我得到一个错误，说我没有路由器的出口和角度都不知道在哪里放置ArtistsDetailComponent视图...

所以专家，请帮助...！ :)

来源

2016-07-13 Mr. M

请您复制并粘贴确切的错误？ –

这听起来像是你可能需要使用[多个销售点]的时候（https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html）不知道这是否你正在寻找什么，它目前处于一个令人不安的实验阶段，但它可能是值得你花时间来看看 –

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

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

来源

2016-07-13 21:09:08 smyk

谢谢，这有助于我得到它的工作。所以我放弃了孩子的路线（但仍然有'path：'artists /：id''）的相同类型的URL并手动嵌入''组件。 “artists /：id”路径现在正在使用ArtistComponent，它通过''显示艺术家列表和其旁边的详细信息。我之前尝试过放弃孩子的路线，但我无法弄清楚如何在同一页面上显示列表和细节 - 我需要做的就是让“artists /：id”路线使用“ArtistsComponent”（列表）而不是'ArtistsDetailComponent'（细节）。 #embarrassing –

在同一页上的两个Angular2组件

回答

相关问题