Angular 8 - 路由未发生 - 垫表行

Question

我不知道为什么点击行后我的路由没有发生。 没有错误显示。 URL 中的路径从“http://localhost:4200/vendor-list”更改为“http://localhost:4200/vendor-list/vendor” 但是页面没有变化。

vendorlist.component.html

<tr mat-header-row *matHeaderRowDef="ordersDisplayedColumns"></tr>
<tr (click)="displayData(row)" mat-row *matRowDef="let row; columns: ordersDisplayedColumns;"></tr>
</table>

vendorlist.component.ts

displayData(row)
  {
    console.log(row);
    this.router.navigate(["/vendor-list/vendor/"]);
  }

myrouting.module.ts

{path:'vendor-list',component:VendorlistComponent,
children:[
  {path:'vendor',component:VendorComponent, 
]},

Answer 1

{path:'vendor-list',
 children:[
   {path:'vendor',component:VendorListComponent,canActivate:[AuthguardGuard]},
   {path:'vendor',component:VendorComponent,canActivate:[AuthguardGuard]}

 ]}

请检查这个

Answer 2

使用 url 参数路由到每行的唯一 ID。

vendorlist.component.html

    <tr mat-header-row *matHeaderRowDef="ordersDisplayedColumns"></tr>
<tr (click)="displayData(row, i)" mat-row *matRowDef="let row; let index as i; columns: ordersDisplayedColumns;"></tr>
</table>

vendorlist.component.ts

displayData(row, id)
  {
    console.log(row);
    this.router.navigate([`/vendor-list/vendor/${id}`]);
  }

myrouting.module.ts

    {path:'vendor-list',component:VendorlistComponent,
children:[
  {path:'vendor/:id',component:VendorComponent, 
]},