Angular 8：如何跨组件获取Tabulator实例以触发download方法

针对你的问题，我整理了几个实用方案，从Angular推荐的组件通信方式到直接通过DOM获取Tabulator实例的方法都有，你可以根据组件间的关系选择最合适的：

方案一：保存Tabulator实例并通过组件通信调用（推荐） #

这是Angular中最规范的做法，避免直接操作DOM，利用组件的实例方法和Angular的通信机制来实现：

1. 在表格组件中保存Tabulator实例并暴露触发方法 #

首先，在渲染Tabulator的组件里，初始化表格时把实例保存下来，然后写一个公共方法来调用download：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import Tabulator from 'tabulator-tables';

@Component({
  selector: 'app-tabulator-table',
  template: '<div #tableContainer id="ex-table-div"></div>'
})
export class TabulatorTableComponent implements OnInit {
  @ViewChild('tableContainer') tableContainer!: ElementRef;
  private tabulatorInstance!: Tabulator;

  ngOnInit(): void {
    // 初始化Tabulator表格
    this.tabulatorInstance = new Tabulator(this.tableContainer.nativeElement, {
      // 你的表格配置：列定义、数据等
      columns: [/* 列配置内容 */],
      data: [/* 表格数据 */]
    });
  }

  // 暴露给外部组件调用的下载方法
  downloadTable(format: string = 'csv', filename: string = 'table-data.csv') {
    this.tabulatorInstance.download(format, filename);
  }
}

2. 根据组件关系选择调用方式 #

• 如果是父子组件关系：
  在父组件的模板中给表格组件加一个模板引用变量，然后通过@ViewChild获取实例调用方法：

  // 父组件代码
  import { Component, ViewChild } from '@angular/core';
  import { TabulatorTableComponent } from './tabulator-table.component';
  
  @Component({
    template: `
      <button (click)="triggerTableDownload()">下载表格</button>
      <app-tabulator-table #tableComp></app-tabulator-table>
    `
  })
  export class ParentComponent {
    @ViewChild('tableComp') tableComponent!: TabulatorTableComponent;
  
    triggerTableDownload() {
      this.tableComponent.downloadTable('csv', 'my-table.csv');
    }
  }
  

• 如果是无直接关系的组件：
  用Angular的共享服务做事件通信：

  1. 创建共享服务：

     import { Injectable } from '@angular/core';
     import { Subject } from 'rxjs';
     
     @Injectable({ providedIn: 'root' })
     export class TableCommunicationService {
       private downloadRequest$ = new Subject<void>();
     
       // 供订阅的数据流
       get downloadRequest() {
         return this.downloadRequest$.asObservable();
       }
     
       // 触发下载的方法
       triggerTableDownload() {
         this.downloadRequest$.next();
       }
     }
     

  2. 在表格组件中订阅事件：

     // TabulatorTableComponent中
     constructor(private tableCommService: TableCommunicationService) {}
     
     ngOnInit(): void {
       // 初始化表格...
       this.tableCommService.downloadRequest.subscribe(() => {
         this.downloadTable();
       });
     }
     

  3. 在另一个组件中调用服务的方法触发下载：

     // 任意组件中
     constructor(private tableCommService: TableCommunicationService) {}
     
     onDownloadClick() {
       this.tableCommService.triggerTableDownload();
     }
     

方案二：通过DOM元素直接获取Tabulator实例（应急方案） #

如果你确实需要通过已获取的DOM元素拿到Tabulator实例，可以用Tabulator提供的静态方法Tabulator.findTable()：

const tableElement = document.getElementById('ex-table-div');
if (tableElement) {
  // findTable返回匹配的实例数组，取第一个即可
  const tabulatorInstance = Tabulator.findTable(tableElement)[0];
  tabulatorInstance.download('csv', 'table-data.csv');
}

⚠️ 注意：这种方式虽然能快速解决问题，但不符合Angular的组件化思想，容易出现元素未初始化、内存泄漏等问题，仅推荐作为临时方案使用。

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