Navigate to child router from named outlet

Question

I'm trying to open the expanded item on some grid of components that are rendered inside the named outlet. For that purpose I've created a children to my named outlet path.

I'm using the Angular 7 and already tried some guides from other posts. Also it seems possible to make by just specify another outlet.

Routing:

{
  path: 'my-path',
  outlet: 'view',
  component: MyComponent,
  data: {
    animation: 'bottom-left-scale'
  },
  children: [
  {
    path: 'project',
    component: ExpandedProjectComponent
  }]
}

in html:

<app-project [id]="project.id" [thumbnail]="project.thumbnail" [name]="project.name" [routerLink]="[{outlets: { view: 'my-path/project' }}]">
</app-project>

But when trying to navigate to it get the error that

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'my-path'.

Using tracing shows it like this - url: "/(view:my-path/(view:my-path/project))" where project should be expanded item. How can i navigate to smth like /(view:my-path/project) or /(view:my-path)/project?

Alexander Ismagulov Alexander Ismagulov · Accepted Answer · 2019-06-25T14:31:50

So, trying it from routerLink directive fails. But using the router.navigate works.

app.routing.ts stays the same.

ExpandedProjectComponent

openProject(id) {
    this.router.navigate('project', {relativeTo: this.route});
}

Navigate to child router from named outlet

1 Answers