angular - 使用 routerLink 渲染数据表中的列

Question

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

 render: (data: any, type: any, row: any, meta) => {
                return `
                    <a href="/store' + row.id + '/'+ storeid +'" title="View">
                        <i class="fa fa-file-text-o"></i>
                    </a>
                `;                
        }

如何以 Angular 2/4 方式实现这一点？

Answer 1

我遇到了同样的问题，花了我一段时间才找到答案。我通过在声明数据表选项时使用 rowCallBack 选项，使用 jquery 将点击事件绑定(bind)到行，然后使用 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";