Question

我有使用以下结构的路线和子路线

export const routes: Routes = [
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two/:id', component: ComponentTwo,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }
];

现在如果我想导航到子路由childTwo，那么在componentTwo内我有以下内容。

 <a [routerLink]="['child-two']">

这很有效。

但是如果我想要一个按钮来做同样的事情而不是链接怎么办。

所以我尝试使用按钮的替代方法，如下所示

<button (click)="toClicked()">Two</button>

然后我有以下点击处理程序

toClicked(){
  this.router.navigate(['component-two','child-two']);
}

如您所见，如果我有链接，我只需要提供子路由childTwo，但使用带有点击处理程序的按钮，我将不得不提供父组件component-two以及孩子childTwo

我可以使用单击处理程序传递子组件来导航吗？

Answer 1

你可以这样做：

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

toClicked(){
    this.router.navigate(['./child-two'], {relativeTo: this.route});
}

请查看relative routes chapter in the docs了解详情。

Angular 2路由器使用组件路径导航，而不是完整路径

1 个答案: