angular - 如何调用路由器导航方法而不是routerLink？

Question

我正在尝试用路由器的导航方法替换 routerLink 。不幸的是，它不起作用，我无法再解释它。routerLink 可以正常工作。

我想替换这个：

<mat-list-item role="listitem" [routerLink]="['details', 2]" routerLinkActive="active">

有了这个：

<mat-list-item role="listitem" routerLinkActive="active" (click)="openDetails(2)">

这就是我使用导航方法的方式：

openDetails(id) {
  this.router.navigate(['details', id]);
}

我的路由器配置如下所示：

const routes: Routes = [
  {
    path: '',
    component: MasterComponent,
    children: [
      {
        path: 'details/:id',
        component: DetailsComponent
      }
    ]
  }
];

我究竟做错了什么？

标签： angularangular-materialangular-cliangular-routingangular-router

Answer 1

您需要将导航附加对象传递给导航方法，并将 relativeTo 字段设置为当前路由，如下所示：

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

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