Navigate programmatically with relativeTo a nested route result in "Error: Cannot match any routes."

Question

我的路由器看起来像 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（父级）导航到相同的 "New" 路由地址（以编程方式）时=37=] 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});
}

导致错误：

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

我已经尝试了各种类似的答案，例如 (1,2,) 但没有任何进展。

Answer 1

您可以将 li 移动到 foos.component.html

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

Working Demo

Navigate programmatically with relativeTo a nested route result in "Error: Cannot match any routes."

Navigate programmatically with relativeTo a nested route result in "Error: Cannot match any routes."

javascript

angular-routing

angular