Angular - 如何导航到 .ts 文件中的命名路由器导出

Question

我有一个侧面导航，在侧面导航中我命名了路由器 socket 。我正在尝试将名为“aside”的路由器 socket 分配给名为“top-words-aside”的子组件。但是，它找不到 url 段。

报告.component.html

<mat-sidenav #rightsidenav position="end" fixedInViewport="fixed">
    <router-outlet name="aside"></router-outlet>
</mat-sidenav>

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

report.component.ts

open() {
    this.rightSideNavService.open();
    this.router.navigate([{ outlets: { aside: ['top-words-aside'] }}]);
}

但是我收到以下错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'top-words-aside' Error: Cannot match any routes. URL Segment: 'top-words-aside'

Answer 1

你在你的模块中导入路由器吗？
您可以定义

private route: ActivatedRoute

在构造函数中。
在打开函数

this.router.navigate([{ outlets: { aside: ['top-words-aside'] }}],{relativeTo:this.route});