Navigation from auxiliary route to another child route

Question

I have routes:

const routes: Routes = [
   {path: 'all', component: NodepadComponent, children: [
      {path: 'create', component: NotepadCreateComponent},
      {path: 'note/:id', component: NotepadItemComponent, outlet: 'item'}]
 }];

I want to navigate from "item" route to "create" route.

I tried this:

constructor(
private route: ActivatedRoute,
private router: Router,
){ }

this.router.navigate(['create', {outlets: {item: null}}], 
{relativeTo: this.route.parent });

But result is (/all/(create//item:note/1)

How to remove "item" route and navigate only create route? Thanks

Answer 1

this.router.navigate(['create']).then(() => this.router.navigate([{outlets: {item: null}}]));

Named routes' router state is stored separately from the primary outlet state. There isn't a way to navigate from one to another at once.