在Angular2中捕获SVG onresize答案

【问题标题】：Capture SVG onresize in Angular2在Angular2中捕获SVG onresize
【发布时间】：2017-01-09 19:22:18
【问题描述】：

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

使用onresize 属性，我得到了预期的事件，但我不能调用组件的方法：

<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 属性。有没有办法从那里调用组件的方法？

【问题讨论】：

你可以试试(SVGResize)="resize()"developer.mozilla.org/en-US/docs/Web/Events/SVGResize
我试过了，它对我不起作用。元素上没有调整大小，似乎 SVG 元素上也没有。 SVG 似乎只是发出与文档相同的事件。（我和plnkr.co/edit/ZGFtvmQHEGZSizvXTgdU?p=preview一起玩的Plunker）
感谢您制作 Plunker。在自己做了更多测试之后，我认为直接在 SVG 上进行事件是不可能的。我发现css-element-queries 似乎是一个很有前途的选择。我还没有尝试过，因为我现在正忙于其他事情。

标签： angular

【解决方案1】：

我不会捕获调整大小事件，而是实现 DoCheck (https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html) 并插入一个 if 测试，以检查自上次检查以来画布 scrollWidth/scrollHeight 是否发生了变化。这样，即使页面本身没有调整大小，您也可以检查大小是否发生了变化。

【讨论】：