Программная навигация с относительным к вложенному маршруту приводит к «Ошибка: невозможно сопоставить ни один маршрут». - PullRequest
Новая
       37

Программная навигация с относительным к вложенному маршруту приводит к «Ошибка: невозможно сопоставить ни один маршрут».

1 голос
/ 04 мая 2020

Мой маршрутизатор выглядит как Полный пример здесь в StackBlitz : 

const eventChildren = [    
    { path: 'new', component: FooEditComponent }    
];

const appRoutes : Routes = [
    { path: '', redirectTo: '/foos' , pathMatch: 'full'},
    { path: 'foos/:year/:month/:day', component: FoosComponent, children: eventChildren}
]

Когда пользователь перемещается по строке URL, вставляя этот адрес в строку URL: https://angular-tfty2q.stackblitz.io/foos/2020/4/20/new все работает как положено (дочерний компонент FooEditComponent отображается должным образом).

Но когда пользователь сначала переходит к https://angular-tfty2q.stackblitz.io/foos/2020/4/20/, а затем пытается перейти на тот же «Новый» адрес маршрута (программно) из HeaderComponent (родитель), нажав «Новый» li с:

header.component.html: 

<ul>
  <li style="cursor: pointer;"><a (click)="onNewClick()">New</a></li>
</ul>

header.component.ts: 

onNewClick() {
    this.router.navigate(['new'], {relativeTo: this.route});
}

Это привело к ошибке:

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «новый»

Я уже пробовал различные похожие ответы, такие как ( 1 , 2 , 3 ) без прогресса .

1 Ответ

1 голос
/ 04 мая 2020

Вы можете переместить li на foos.component. html

<ul>
    <li style="cursor: pointer;"><a [routerLink]="['./new']">New</a></li>
</ul>

Рабочая демонстрация

...