如何調用路由器導航方法而不是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
      }
    ]
  }
];

我究竟做錯了什么？

Answer 1

您需要將導航附加對象傳遞給導航方法，並將 relativeTo 字段設置為當前路由，如下所示：

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

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