Angular 角度-如何从同一命名路由器出口导航到不同组件
我有一个应用程序,它有一个侧导航栏,侧导航栏的内容是用一个命名的路由器插座“aside”填充的 有一个列表组件与侧面导航关联。此组件包含项目列表。用户可以单击列表以转到详细版本。详细版本应替换同一命名路由器出口中的列表组件 路由。tsAngular 角度-如何从同一命名路由器出口导航到不同组件,angular,Angular,我有一个应用程序,它有一个侧导航栏,侧导航栏的内容是用一个命名的路由器插座“aside”填充的 有一个列表组件与侧面导航关联。此组件包含项目列表。用户可以单击列表以转到详细版本。详细版本应替换同一命名路由器出口中的列表组件 路由。ts const routes: Routes = [ { path: '', component: ReportsComponent }, { path: ':id', compo
const routes: Routes = [
{
path: '',
component: ReportsComponent
},
{
path: ':id',
component: ReportDetailComponent,
resolve: {
job: JobResolver,
report: ReportResolver,
activity: ActivityResolver,
},
children: [
{ path: 'top-words-aside', component: TopWordsAsideComponent, outlet: 'aside' },
{ path: 'top-words-detail-aside', component: TopWordsDetailAsideComponent, outlet: 'aside' },
]
}
];
showFullConversation() {
//close the current one
this.router.navigate([{ outlets: { aside: null } }], { relativeTo: this.route.parent });
//open detailed versoin
this.router.navigate([{ outlets: { aside: ['TopWordsDetailAsideComponent'] } }], { relativeTo: this.route.parent });
}
在这里,我试图打开详细版本
组件旁边的顶部单词。ts
const routes: Routes = [
{
path: '',
component: ReportsComponent
},
{
path: ':id',
component: ReportDetailComponent,
resolve: {
job: JobResolver,
report: ReportResolver,
activity: ActivityResolver,
},
children: [
{ path: 'top-words-aside', component: TopWordsAsideComponent, outlet: 'aside' },
{ path: 'top-words-detail-aside', component: TopWordsDetailAsideComponent, outlet: 'aside' },
]
}
];
showFullConversation() {
//close the current one
this.router.navigate([{ outlets: { aside: null } }], { relativeTo: this.route.parent });
//open detailed versoin
this.router.navigate([{ outlets: { aside: ['TopWordsDetailAsideComponent'] } }], { relativeTo: this.route.parent });
}
错误:
错误:未捕获(承诺中):错误:无法匹配任何路由。
URL段:“报告/5a85d1cbcff47e0001e34640”错误:无法匹配
任何路线。URL段:“报告/5a85d1cbcff47e0001e34640”
你需要尝试动态组件加载,嗯,有趣的是,在那里的演示是坏的,你有一个更好的例子,我可以看看。这能让我回到上一个列表组件吗?演示正在我的系统上运行,这是切换屏幕的最佳方式。不,你需要维护日志。这意味着我可以一起摆脱命名的路由器出口?另外,LiveStackBlitz示例也不起作用。