渲染函数中的 Angular Datatables routerLink

Question

我正在使用 Angular-Datatables 包并使用渲染函数来显示一个按钮，除了这个按钮需要一个单击事件来重定向到另一个页面，目前它带有一个

onlick

但显然这会进行完全重定向这违背了 Angular 作为 SPA 的目的。

这是我对数据表的实现

<table datatable [dtOptions]="dtOptions"></table>

this.dtOptions = {
  lengthChange:false,
  ajax: (dataTablesParameters: any, callback) => {
    this.userService.getUsers().subscribe(resp => {
        callback({
          data: resp
        });
      });
  },
  columns: [{
    title: 'Username',
    data: 'name'
  }, {
    title: 'Email',
    data: 'email'
  }, {
    title: 'Phone Number',
    data: 'phoneNumber'
  }, {
    title:'',
    data:null,
    render: function (data, type, row, meta) {
      const temp = JSON.stringify(data);
      return `<button class="btn btn-primary" onclick="location.href='/userdetails?user=`+JSON.parse(JSON.stringify(data)).id+`'">Profile</button>`;
   }
  }],
  responsive: true
};

这个问题使用

rowCallback

函数将单击事件分配给整行，但由于

responsive:true

标志，我无法执行此操作，因为如果没有这个，在小窗口中，我的表格会超出屏幕，所以响应式通过单击事件将行调整为屏幕宽度，以展开与

rowCallback

冲突的剩余字段（如果我使用它的话）（特别是

rowCallback

优先）。

我能做些什么来解决这个问题？我已经尝试过

<button class="btn btn-primary" routerLink='/testroute'">Profile</button>

但这没有任何作用，可以通过检查元素看到它，但路线没有改变，控制台中也没有错误

Answer 1

我得到了一个有效的解决方案，它可能不是“正确”的方式，但它对我有用。

docs使用了

ngAfterViewInit()

并添加了一个点击侦听器，但示例不是很清楚，它向整个文档而不是按钮本身添加了一个点击侦听器，并且文档示例中的单击仅适用于按钮，因为它查找的属性没有显示如何定义。所以我最终做的是检查点击的目标并检查它的

innerHTML

是否与我定义的按钮匹配，所以它看起来像这样；

this.renderer.listen('document', 'click', (event) => {
    if(event.target.innerHTML === 'Profile'){
        //navigate function
    }
});

但是这样做，我现在“丢失”了表行的用户 ID，因此我将用户的 ID 指定为渲染函数中按钮的 ID，如下所示；

render: function (data: any, type: any, full: any) {
    return `<button class="btn btn-primary" id="${JSON.parse(JSON.stringify(data)).id}">Profile</button>`;
}

所以我的

navigate

中的

renderer.listen

功能现在是；

this.router.navigate(['/userdetails'], {queryParams:{user: event.target.id}});

但现在因为这会在整个文档上分配一个点击侦听器，所以每个页面上的任何地方都会触发此监听器，因此必须像这样在

ngOnDestroy

中将其删除；信用yurzui 和 AqeelAshiq

listenerFn = () => {};

ngAfterViewInit(): void {
    this.listenerFn = this.renderer.listen(...)
}

ngOnDestroy() { //stop listener from working on every click in every page in site
    this.listenerFn();
}

所以把它们放在一起，我的组件现在看起来像这样；

dtOptions: DataTables.Settings = {};
columns = [{ prop: 'Name' }, { name: 'Email' }, { name: 'Phone Number' }];
listenerFn = () => {};
constructor(private userService: UserService,
  private router:Router,
  private renderer: Renderer2) { }
ngOnInit(): void {
  this.dtOptions = {
    lengthChange:false,
    ajax: (dataTablesParameters: any, callback) => {
      this.userService.getUsers().subscribe(resp => {
          callback({
            data: resp
          });
        });
    },
    columns: [{
      title: 'Username',
      data: 'name'
    }, {
      title: 'Email',
      data: 'email'
    }, {
      title: 'Phone Number',
      data: 'phoneNumber'
    }, {
      title:'',
      data:null,
      render: function (data: any, type: any, full: any) {
        return `<button class="btn btn-primary" id="${JSON.parse(JSON.stringify(data)).id}">Profile</button>`;
      }
    }],
    responsive: true
  };
}
ngAfterViewInit(): void {
  this.listenerFn = this.renderer.listen('document', 'click', (event) => {
    if(event.target.innerHTML === 'Profile'){
      this.router.navigate(['/userdetails'], {queryParams:{user: event.target.id}});
    }
  });
}
ngOnDestroy() { //stop listener from working on every click in every page in site
  this.listenerFn();
}

---

现在为什么我提到这可能不是“正确”的方式，正如前面提到的，点击侦听器无处不在，而不仅仅是这个表，正如前面提到的，我已经减轻了它在页面导航离开时被删除的情况，但它仍然存在此页面上的任何地方，因此需要检查它是我的实际按钮。理想情况下，我的解决方案不需要这个，因为它只是在按钮上，但这是另一天的问题。