如何从 Javascript 函数执行 Angular 函数？

Question

对于我的 Web 应用，我创建了一个 html5 画布并创建了允许我通过 mousedown、mouseup 和 mousemove 在此画布上绘图的函数：

<canvas 
    #canvas id="canvas" 
    (mousemove)="mouseMove($event)" 
    (mousedown)="mouseDown()" 
    (mouseup)="mouseUp()">
</canvas>

经过测试，我意识到这不适用于触摸屏，我需要这样的触摸事件：

document.getElementById('canvas').addEventListener('touchstart', function(event) {

})

但是我不想重做 Javascript 中的所有代码，而是仍然使用我的 Angular 函数。在这个例子中，我如何从 javascript 函数中执行 mousedown 函数：

export class PenInputComponent implements AfterViewInit {

    public ngAfterViewInit(): void {
        document.getElementById('canvas').addEventListener('touchstart', function(event) {

            // execute mousdeDown function here
        })
    }

    public mouseDown(): void {
        this.startDrawState();
    }
}

我怎样才能做到这一点，甚至有可能吗？

更新：解决方案如下：

document.getElementById('canvas').addEventListener('touchstart', (event) => {
    this.mouseX = event.targetTouches[0].pageX;
})

由于可能有多个触摸事件，它是一个数组，必须相应地获取坐标，但对于 angular，您应该将其放入 canvas 标记中，如下所述。

Answer 1

_{（您可以在 Angular 模板中监听任何原生 HTML 事件，而不仅仅是鼠标点击）}

您可以使用pointer events:

<canvas #canvas id="canvas" 
   (pointermove)="mouseMove($event)" 
   (pointerdown)="mouseDown()" 
   (pointerup)="mouseUp()"></canvas>

这在 Safari 中不受支持。如果您真的需要 Safari 支持，您应该使用 (touchstart) 等...

总而言之，这是打字稿材料的基本角度。我建议你阅读这两个主题。好的起点是 angular.io 网站。

要真正回答您的问题，您可以在函数中使用 this.mouseDown，但话又说回来，不要在 Angular 应用程序中使用 getElementById 和 addEventListener。所以真的..不要在这里使用代码：

public ngAfterViewInit(): void {
  document.getElementById('canvas').addEventListener('touchstart', (event) => {
    this.mouseDown();
  })
}

public mouseDown(): void {
  this.startDrawState();
}