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/，然后尝试通过单击“新建” {{ 1}}：

HeaderComponent：

li

header.component.html：

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

它导致错误：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“新”

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

Answer 1

您可以将li移至foos.component.html

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

Working Demo

使用relativeTo以编程方式导航到嵌套路线会导致“错误：无法匹配任何路线。”

1 个答案: