Question

我的目标是在Angular 2模板中有一个SVG画布，可以与其父元素一起缩放，并在其大小发生变化时调用重绘方法。

使用onresize属性，我按预期获得事件，但我无法调用Component的方法：

<svg width="100%" height="100%" id="canvas" onresize="console.log('resize')">
</svg>

当我使用正确的Angular 2语法时，我可以调用一个方法，但事件永远不会被触发：

<svg width="100%" height="100%" id="canvas" (resize)="resize()">
</svg>

为了测试逻辑，我将(resize)更改为(click)，然后在单击画布时触发事件。

由于这对我不起作用，我尝试了其他方法来附加onresize事件。

首先我将#canvas添加到svg代码：

<svg width="100%" height="100%" #canvas id="canvas">
</svg>

然后我在组件中添加了ViewChild。

  @ViewChild('chart') canvas : ElementRef;

我已尝试过此处所述的所有方法：SVGResize | onresize event

function handler() { console.log('SVG resize') }
this.canvas.nativeElement.onresize = handler;
this.canvas.nativeElement.attachEvent("onresize", handler);
this.canvas.nativeElement.addEventListener("SVGResize", handler);

他们都没有发动任何事件。到目前为止，我可以捕获调整大小的唯一方法是在文档级别设置一个事件处理程序：

window.addEventListener('resize', () => {
  this.draw();
});

因此，每当页面调整大小时，我都可以触发svg的重绘。这虽然有一些缺点。首先，当文档调整大小时，SVG并不总是调整大小。其次，当页面大小相同时，SVG也可以在其他情况下调整大小。我可以解决这些问题，但它不是那么优雅，容易出错。只是直接处理SVG上的调整大小会好得多。

一旦我有时间，我就要制作一个Plunker。我使用Chrome和Firefox进行了测试。

为什么(resize)输出不起作用，以及如何正确处理画布大小调整事件？

我可以直接在SVG上捕获调整大小事件的唯一方法是使用onresize属性。有没有办法从那里调用Component的方法？

Answer 1

我会实现DoCheck（https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html）而不是捕获resize事件，并且如果自上次检查后画布scrollWidth / scrollHeight已更改，则插入if测试。这样，即使页面本身没有调整大小，您也可以检查大小是否已更改。

在Angular2中捕获SVG onresize

1 个答案: