Angular 5 (onClick)事件触发两次。

Question

我有一个使用按钮的组件：

<dx-button text="{{'VIEW_DATA.BUTTON.EXPORT_TO_EXCEL' | translate }}" type="normal" (onClick)="export()" ></dx-button>

在.ts文件中，我执行：

export() {
  let cells = [];
  // some code here to fill cells
  console.log('exporting component');
  this._excelExportService.exportAsExcelFile(cells, 'global_view');
}

export()函数调用的服务是：

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const EXCEL_TYPE = 'application/vnd.openxmlformats- officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelExportService {

constructor() { }

public exportAsExcelFile(json: any[], excelFileName: string, header?: any): void {
  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
  const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
  const excelBuffer: any =
    XLSX.writeFile(
      workbook,
      excelFileName + '_export_' + Date.now() + EXCEL_EXTENSION,
      { bookType: 'xlsx', bookSST: false, type: 'buffer' }
  );
}
}

当我点击按钮时，export()函数被调用两次，所以我得到了两个不同的Excel文件和两个console.log()。但是如果我只是注释掉：

export() {
  let cells = [];
  // some code here to fill cells
  console.log('exporting component');
  // this._excelExportService.exportAsExcelFile(cells, 'global_view');
}

该函数按预期仅被调用一次。

为什么调用我的服务会改变函数的行为？

- Yesub

Answer 1

你需要使用 (click)="export()"。请参考文档。

<dx-button text="{{'VIEW_DATA.BUTTON.EXPORT_TO_EXCEL' | translate }}" type="normal" (click)="export()" ></dx-button>

- Melchia

---

它可以工作。我使用了我正在使用的库的文档中提到的(onClick)：DevExpress，但似乎与常规的(click)事件一起使用效果更好 :-) - Yesub