我不得不说我刚刚开始研究 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 放在哪里...
请各位专家帮忙...! :)
最佳答案
有两种相互矛盾的方法。要么使用子路由,在这种情况下,详细信息组件应嵌入到 <router-outlet>
中,或者您“手动”嵌入详细信息组件,如 <artist-detail>
。由于您尝试混合它们(子路由和手动嵌入到模板中),路由器提示它找不到将子路由组件放入的导出。
因此,要么放弃子路由,然后可以使用 [] 语法传递参数,要么坚持使用子路由,然后详细信息组件应该从路由参数中提取 id 并收集详细信息。您收集详细信息的方式取决于您的型号。我将应用程序状态保存在 Redux 中,并从那里获取 if 。您也可以使用共享服务。
关于angular - 同一页面上的两个 Angular2 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38359946/