Question

在DataTable实现中，我可以在这里使用routerLink而不是href，routerLink呈现链接但不会导航到页面。

createFile

如何实现Angular 2/4方式？

Answer 1

我遇到了同样的问题并花了一些时间才找到答案。我在声明数据表选项时使用rowCallBack选项解决了这个问题，使用jquery将click事件绑定到行，然后使用angular的路由器模块。

import {Component, OnInit} from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'app-my-datatable',
  templateUrl: './my-datatable.component.html']
})
export class DataTableComponent {

  constructor(private router: Router) { }

  rowClickHandler(data) {
    this.router.navigate(['store/' + data['id']]);
  }

  dataTableOptions = {
    rowCallback: (row: Node, data: any[] | Object, index: number) =>{
      const self = this;
      jQuery('td', row).unbind('click');
      jQuery('td', row).bind('click', () => {
        self.rowClickHandler(data);
      });
    return row;
    },
    ...
  }
}

此链接引导我回答。 https://l-lin.github.io/angular-datatables/#/advanced/row-click-event

我还必须安装jquery：

npm install --save @types/jquery

导入文件或在typings.d.ts文件中声明

import * as jQuery from "jquery";

Answer 2

使用

<a [routerLink]="['/store', row.id]" title="View">
   <i class="fa fa-file-text-o"></i>
</a>

使用routerLink在Data表中渲染列

2 个答案: