单击垫表行后如何布线 [英] How to route after clicking row of mat table

问题描述

单击垫表的行后我无法路由.它没有显示任何错误.在 URL 路径中，像这样从http://localhost:4200/vendor-list"正确更改到http://localhost:4200/vendor-list/vendor".但显示相同的页面(表格).下面我附上我的代码，如果我做错了什么，有人可以帮忙

<块引用>

vendorlist.component.html

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

<块引用>

vendorlist.component.ts

导出类 VendorlistComponent 实现 OnInit {构造函数(私有路由器:路由器){}显示数据(行){控制台日志(行)；this.router.navigate(["/vendor-list/vendor/"]);}}

<块引用>

myroute.module.ts

{path:'vendor-list',component:VendorlistComponent,canActivate:[AuthguardGuard],孩子们:[{path:'vendor',component:VendorComponent,canActivate:[AuthguardGuard]]}

为了测试，我将选择器放在我的桌子前面.然后页面显示但在我的页面下方，上一页的同一个表格也显示

解决方案

你必须改变路由如下:

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

如果你想改变完整的内容，你需要在children数组中添加父组件作为''路径.

如果你想使用父组件的一些内容，那么你必须使用 router-outlet 并且你的配置非常适合.

I am not able to route after clicking row of mat table. It not showing any error. In URL path is changing properly like this from "http://localhost:4200/vendor-list" to "http://localhost:4200/vendor-list/vendor". But the same page(table) is showing. Below i am attaching my code, can anybody help if i did something wrong in this

vendorlist.component.html

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

vendorlist.component.ts

export class VendorlistComponent implements OnInit {

  constructor(private router:Router) { }

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

myroute.module.ts

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

]}

For testing,I placed selector before my table. then the page was showing but below my page, the same table of previous page was also showing

解决方案

You have to change routing as below:

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

 ]}

If you want to change complete content you need to add parent component in children array as '' path.

If you want to use some content from parent component then you have to use router-outlet and your config is good for that.

这篇关于单击垫表行后如何布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！