用relativeTo对嵌套路由进行程序导航，结果是 "错误。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.iofoos2020420new。 万事如意（The FooEditComponent 子组件被渲染成预期的样子）。)

但是当用户第一次浏览到 https:/angular-tfty2q.stackblitz.iofoos2020420。然后尝试从 "新 "途径地址导航到同一 "新 "途径地址（编程）。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});
}

导致错误。

ERROR错误。未捕获（在承诺中）。错误：无法匹配任何路线。不能匹配任何路由。 URL段：'new'

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

Answer 1

你可以移动 li 到foos.component.html

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

工作演示