我有一个带有侧导航栏的应用程序,侧面导航栏的内容使用命名的路由器插座“旁边”填充 .

有一个列表组件与旁边导航相关联 . 该组件包含项目列表 . 用户可以单击列表以转到详细版本 . 详细版本应替换同一命名路由器出口中的列表组件 .

routing.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' },
        ]
    }
];

在这里,我试图打开详细版本

top-words-aside-component.ts

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 });

    }

错误:

ERROR错误:未捕获(在承诺中):错误:无法匹配任何路由 . 网址细分:'reports / 5a85d1cbcff47e0001e34640'错误:无法匹配任何路由 . 网址细分:'reports / 5a85d1cbcff47e0001e34640'