使用 MorrisJs 的点击事件与 Angular 6

Question

我在一个项目中使用了this wrapper of MorrisJs Chart。这很好用，但我找不到获取点击事件结果的方法。

原来的Morris.js使用jQuery，可以这样获取点击事件：

Morris.Line({ 
    ...
}).on('click', function(i, row) { 
    console.log(i);
    console.log(row);
});

你知道如何用 Angular 拦截那个点击吗？谢谢！

Answer 1

今天我找到了解决办法。应该对指令进行 3 处更改：

import Output, EventEmitter
将输出初始化为事件发射器@Output() clickChart = new EventEmitter();
绑定莫里斯图点击事件与指令输出： let my_this = this; this.chartInstance.on('click', function(i, row) { my_this.clickChart.emit({ event, i, row }); });

然后通过(clickChart)方法在组件中捕获点击事件即可。示例：

<div    mk-morris-js
        type='Bar'
        [options]='options'
        [data]='datas'
        (clickChart)='test($event)'
></div>

中查看指令的完整源代码

Use click event of MorrisJs with Angular 6