Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 角度-如何从同一命名路由器出口导航到不同组件_Angular - Fatal编程技术网

Angular 角度-如何从同一命名路由器出口导航到不同组件

Angular 角度-如何从同一命名路由器出口导航到不同组件,angular,Angular,我有一个应用程序,它有一个侧导航栏,侧导航栏的内容是用一个命名的路由器插座“aside”填充的 有一个列表组件与侧面导航关联。此组件包含项目列表。用户可以单击列表以转到详细版本。详细版本应替换同一命名路由器出口中的列表组件 路由。ts const routes: Routes = [ { path: '', component: ReportsComponent }, { path: ':id', compo

我有一个应用程序,它有一个侧导航栏,侧导航栏的内容是用一个命名的路由器插座“aside”填充的

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

路由。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 });

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

组件旁边的顶部单词。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示例也不起作用。