Question

我想在具有引用的行上实现OnClick。如果我与用户1单击行，则要转到，所以请参阅用户1的详细信息例如，如果我单击user1的行，我想访问存储在该user1的行中的信息。

这是html文件：

<table mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="country">
       <th mat-header-cell *matHeaderCellDef> Country </th>
       <td mat-cell *matCellDef="let element"> {{element.country}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onClick(row)" >{{row.onClickAction}}</tr>
</table>

这是ts文件：

export class AppComponent {
    onClickAction = '';
    onClick(){
        this.onClickAction = 'Action';
    }
}

Answer 1

像这样尝试，现在您将可以访问行数据并使用router服务导航到另一个组件。

模板

  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickHandler(row)"> 
 </tr>

组件

export class AppComponent {

  constructor(private _router: Router) {}

  clickHandler(row) {
       this._router.navigateByUrl(`user/${row.id}`);
       console.log(row)
  }

}

详细信息组件

export class DetailComponent implements OnInit {

  public selectedUserId : string;
  constructor(private _activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this._activatedRoute.params.subscribe(params => {
      this.selectedUserId = params.id;
    })
  }

}

demo ??

已更新 ?‍♂️

如果要在路由之间发送复杂的对象，可以使用共享服务（singleton services），或者如果您使用的是Angle 7.3及更高版本，则导航接受类型为NavigationExtras的另一个参数一个名为state的属性稍后会接受一个对象，在导航到目标组件之后，我们可以从历史记录对象window.history.state

中获取state的值

主

  clickHandler(row) {
   this._router.navigate([`details`,row.position] , {state:{...row} }); 
  }

详细信息

 this.user = window.history.state;

您可以使用window.history.state或路由器服务来获取状态值

demo ☕☕

Answer 2

如果您在html (click)="onClick(row)"中传递数据，则可以在您的方法中使用它：

onClick(rowData) {
  console.log(rowData);
  this.onClickAction = 'Action';
}

如何在MatTable行上实施OnClick操作？

2 个答案: