Angular router.navigate无法使用tabulator.info js中的单元格单击

Question

我在我的角度项目中使用tabulator.info js来加载表格。这有他们的文档中提到的Angular Framework Support。我有一个操作列，用于在该列格式化程序中放置编辑按钮。问题是routerLink也没有工作，并且单元格点击功能中的this.router.navigate也不起作用。 this.router.navigate抛出以下错误

无法读取undefined的属性导航

但触发了单元格内部的alert()函数。

我是Angular的新手。请协助。我正在使用此制表符作为组件并按照其文档中的说明使用它。

进口

import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

构造函数

constructor(private router: Router) {}

的OnInit

ngOnInit() {
    this.columnNames = [
      {
        title: "Question",
        field: "description"
      },
      {
        title: "Total Answers",
        field: "",
        formatter: function (cell) {
          return cell.getRow().getData().answers.length;
        }
      },
      {
        title: "Feedback Type",
        field: "feedbackType"
      },
      {
        title: "Action",
        field: "",
        formatter: function (cell) {
          //cell - the cell component
          //formatterParams - parameters set for the column
          //onRendered - function to call when the formatter has been rendered

          return `<a [routerLink]="/feedbackquestion/${cell.getRow().getData().id}/edit" class="btn btn-sm btn-inverse text-white"><i class="fa fa-edit"></i> Edit</a>`; //return the contents of the cell;
        },
        cellClick: function (e, cell) {
          //e - the click event object
          //cell - cell component
          this.router.navigate([`/feedbackquestion/${cell.getRow().getData().id}/edit`]);
        },
      }
    ];
  }

Answer 1

这是因为您将单元格单击侦听器作为普通函数提供，因此函数内部的上下文发生更改，而this未定义。

要保留组件类的上下文，您需要将侦听器提供为所谓的arrow function。

// ...

cellClick: (e, cell) => {
  this.router.navigate([`/feedbackquestion/${cell.getRow().getData().id}/edit`]);
},

// ...