如何将角度服务传递给 Tabulator JS？

Question

我正在尝试在 Tabulator 表上设置 rowClick() 函数。 rowClick() 会将行数据传递给服务。

import { Component, AfterViewInit } from '@angular/core';
import { FuzeUser } from 'src/app/models/fuze-user';
import { UserEditService } from 'src/app/services/user-edit.service';
import { UserService } from 'src/app/services/user.service';
import Tabulator from 'tabulator-tables';

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.scss']
})
export class UserTableComponent implements AfterViewInit {

  tab = document.createElement('div');
  public tableName: string = 'fuze-user-table';
  private columns: any[] = [];
  private rows: any[] = [];
  table: Tabulator;
  public drawn: boolean = false;
  

  constructor(private userService: UserService, private userEditService: UserEditService) {
  }



  private drawTable(): void {
    this.table = new Tabulator(this.tab, {
      layout: "fitDataStretch",
      movableColumns: true,
      maxHeight:"485px",
      pagination: "local",
      paginationSize: 25,
      paginationSizeSelector: [25, 50, 100],
      selectable: true,
      selectableRangeMode: "click",
      data: this.rows,
      columns: this.columns,
      rowClick:function(e, id, data, row){
        this.userEditService.setUser(data);
      }
    });
    document.getElementById(`${this.tableName}`).appendChild(this.tab);
  }
}

我认为找不到该服务是因为 rowClick() 函数中“this”的范围仅存在于 Tabulator 对象中。

我还尝试在我的组件类中创建一个调用 this.userEditService.setUser 的函数，然后将该方法传递给制表符。这也失败了，因为传递的方法在服务范围内找不到任何东西。

import { Component, AfterViewInit } from '@angular/core';
import { FuzeUser } from 'src/app/models/fuze-user';
import { UserEditService } from 'src/app/services/user-edit.service';
import { UserService } from 'src/app/services/user.service';
import Tabulator from 'tabulator-tables';

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.scss']
})
export class UserTableComponent implements AfterViewInit {

  tab = document.createElement('div');
  public tableName: string = 'fuze-user-table';
  private columns: any[] = [];
  private rows: any[] = [];
  table: Tabulator;
  public drawn: boolean = false;
  

  constructor(private userService: UserService, private userEditService: UserEditService) {
  }

  private setUser(data: FuzeUser){
    this.userEditService.setUser(data)
  }

  private drawTable(callback: (user: any) => void): void {
    this.table = new Tabulator(this.tab, {
      layout: "fitDataStretch",
      movableColumns: true,
      maxHeight:"485px",
      pagination: "local",
      paginationSize: 25,
      paginationSizeSelector: [25, 50, 100],
      selectable: true,
      selectableRangeMode: "click",
      data: this.rows,
      columns: this.columns,
      rowClick:function(e, id, data, row){
        callback(data);
      }
    });
    document.getElementById(`${this.tableName}`).appendChild(this.tab);
  }
}

如何从制表符对象中访问我的服务？

Answer 1

保存对该函数的引用并在 Tabulator 构造函数中使用它

const callback = this.userEditService.setUser;

this.table = new Tabulator(this.tab, {
  layout: "fitDataStretch",
  ...
  rowClick:function(e, id, data, row){
    callback(data);
  }
});

编辑 哦，我看到你试过了。所以 setUser() 方法使用了来自 userEditSerivce 的东西？

EDIT2 箭头函数应该可以解决问题

const callback = this.userEditService.setUser;

this.table = new Tabulator(this.tab, {
  layout: "fitDataStretch",
    ...
    rowClick: (e, id, data, row) => {
      callback(data);
    }
  });