使用 routerLink 渲染数据表中的列答案

【问题标题】：Render column in Data table with routerLink使用 routerLink 渲染数据表中的列
【发布时间】：2017-11-28 10:33:05
【问题描述】：

在 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 方式实现这一点？

【问题讨论】：

标签： angular datatables angular-datatables

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用

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

【讨论】：

[ts] 逗号运算符左侧未使用，没有副作用。
在地址栏中手动转到“/store/:id”时是否能够正确路由？
是的，实际上这是特定于数据表的渲染功能，它不允许与 routerLink 进行动态绑定
谁能帮我解决一下？