Angular Tabulator模板中(click)事件不触发问题求助

Tabulator在渲染表格内容时会直接操作DOM，导致Angular原生事件绑定（如(click)）可能因变更检测未追踪到动态元素而失效。以下是几种可行的解决方案：

方案一：自定义Tabulator格式化器+Angular Renderer2绑定事件 #

在Tabulator列配置中使用自定义格式化器生成DOM元素，通过Angular的Renderer2手动绑定点击事件，确保事件关联组件上下文：

import { Component, Renderer2, ElementRef } from '@angular/core';

// 组件其他逻辑
constructor(private renderer: Renderer2, private el: ElementRef) {}

// 初始化Tabulator表格
initTabulator(): void {
  this.table = new Tabulator(this.el.nativeElement.querySelector('#target-table'), {
    columns: [
      // 其他列配置
      {
        title: 'Model Parameters',
        formatter: (cell) => {
          const params = this.getParams(this.task, 'model');
          const container = this.renderer.createElement('div');
          this.renderer.addClass(container, 'model-params');

          params.forEach(param => {
            const item = this.renderer.createElement('div');
            this.renderer.addClass(item, 'model-params--item');
            // 设置显示内容
            this.renderer.setProperty(item, 'textContent', `${param.key}: ${JSON.stringify(param.value)}`);
            // 绑定点击事件
            this.renderer.listen(item, 'click', () => {
              this.addToParamsSortingList(param.key, 'model');
            });
            // 处理active样式
            if (this.isParamListIncludesParam(param.key)) {
              this.renderer.addClass(item, 'active');
            }
            // 设置tooltip（原生替代PrimeNG的pTooltip，若需PrimeNG需手动初始化组件）
            this.renderer.setAttribute(item, 'title', 'Add/Remove to sorting list');

            this.renderer.appendChild(container, item);
          });

          return container;
        }
      }
    ]
  });
}

方案二：ViewChildren+MutationObserver监听DOM绑定事件 #

利用Angular的ViewChildren和MutationObserver监听Tab渲染后的DOM变化，手动为目标元素绑定点击事件：

import { Component, ViewChildren, ElementRef, AfterViewInit, QueryList } from '@angular/core';

// 组件其他逻辑
@ViewChildren('paramsContainer') paramsContainers!: QueryList<ElementRef>;
private domObserver: MutationObserver | null = null;

ngAfterViewInit(): void {
  this.domObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        const items = this.el.nativeElement.querySelectorAll('.model-params--item');
        items.forEach((item: HTMLElement) => {
          // 移除重复绑定的事件
          item.removeEventListener('click', this.handleParamClick);
          // 绑定点击事件
          item.addEventListener('click', (e) => {
            const key = e.currentTarget.getAttribute('data-key');
            key && this.addToParamsSortingList(key, 'model');
          });
          // 存储参数key到DOM属性
          const paramKey = item.textContent?.split(':')[0].trim();
          paramKey && item.setAttribute('data-key', paramKey);
        });
      }
    });
  });

  this.paramsContainers.forEach(container => {
    this.domObserver!.observe(container.nativeElement, {
      childList: true,
      subtree: true
    });
  });
}

ngOnDestroy(): void {
  this.domObserver?.disconnect();
}

对应的模板需要添加模板引用变量：

<div #paramsContainer class="model-params" *ngIf="isModelParamsAvailable">
  <div
    class="model-params--item"
    *ngFor="let param of getParams(task, 'model')"
    [class.active]="isParamListIncludesParam(param.key)"
    title="Add/Remove to sorting list">
    {{ param.key }}: {{ param.value | json }}
  </div>
</div>

方案三：Tabulator cellClick事件+数据匹配 #

通过Tabulator原生的cellClick事件，结合单元格内容或行数据匹配目标参数：

// 初始化Tabulator表格
initTabulator(): void {
  this.table = new Tabulator('#target-table', {
    // 其他配置
    cellClick: (e, cell) => {
      // 判断是否为目标列
      if (cell.getColumn().getField() === 'modelParams') {
        const rowData = cell.getRow().getData();
        const params = this.getParams(rowData.task, 'model');
        // 从点击元素内容解析参数key
        const clickedKey = e.target.textContent?.split(':')[0].trim();
        const matchedParam = params.find(p => p.key === clickedKey);
        matchedParam && this.addToParamsSortingList(matchedParam.key, 'model');
      }
    }
  });
}

内容的提问来源于stack exchange，提问作者FierceDev