Angular - How to navigate to a named router outlet in a .ts file

3
votes

I have a side nav and within the side nav i have named router outlet. I am trying to assign the "aside" named router outlet to a sub component called "top-words-aside". However, it cannot find the url segment.

reports.component.html

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

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

reports.component.ts

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

However i get the following error.

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'

1
angular
try this.router.navigate(['parentHere', {outlets: {'top-words-aside':}}]); – Stefan
@Stefan From my routes we can see the parent is a dynamic id. – Kay
I just tried that now it says 'ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '5a85d1cbcff47e0001e34640' Error: Cannot match any routes. URL Segment: '5a85d1cbcff47e0001e34640'' – Kay
this.router.navigate([{ outlets: { outletName: ['navigatingPath'] } }], { skipLocationChange: true }); what about this one – Stefan
That one gives same error as original – Kay

1 Answers

1
votes

do you import the router in your module?

you can define

private route: ActivatedRoute

in constructor funtion.

In the open function

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