Capture SVG onresize in Angular2

Question

Моя цель состоит в том, чтобы иметь холст SVG в шаблоне Angular 2, который масштабируется с его родительским элементом и вызывает метод перерисовывания при изменении его размера.

Используя onresize собственность, я получаю события, как ожидалось, но я не могу назвать метод компонента:

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

Когда я использую правильный синтаксис Угловое 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 напрямую.

Как только у меня будет время, я собираюсь сделать Плункер. Я провел тесты с помощью Chrome и Firefox.

Почему не работает вывод (resize) и как я могу правильно обрабатывать события изменения размера холста?

Единственный способ захватить события изменения размера непосредственно на SVG - это использовать атрибут onresize. Есть ли способ вызывать методы Компонента оттуда?

Answer 1

Вместо того, чтобы записывать события изменения размера, я бы выполнил DoCheck (https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html) и вложил тест if, если переменная холста canvasWidth/scrollHeight изменилась с момента последней проверки. Таким образом, вы также можете проверить, изменился ли размер, даже если сама страница не изменилась.