在 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 方式实现这一点?
最佳答案
我遇到了同样的问题,花了我一段时间才找到答案。我通过在声明数据表选项时使用 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";
关于angular - 使用 routerLink 渲染数据表中的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47529333/