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

Question

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

<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 模板中监听任何 native HTML 事件，而不仅仅是鼠标单击)}

您可以使用pointer events :

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

不过 Safari 不支持此功能。如果你真的想要 safari 支持，你应该使用 (touchstart) 等...

总而言之，这是带有 typescript Material 的非常基本的 Angular 。我建议您阅读有关这两个主题的内容。很好的起点是 angular.io 网站。

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

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

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