typescript - Lägg till onclick-händelse på svg-rektangel med Angular Renderer2

Finns det några sätt att lägga till onclick-händelse på en SVG-rect.

Jag har försökt använda Angular Renderer2,

constructor(public renderer: Renderer2){
    const rect = document.createElementNS( 'http://www.w3.org/2000/svg' , 'rect' );
    this.renderer.setAttribute(rect, 'onclick', 'callRect()');
}

callRect(){
console.log("Rect clicked");
}

Men jag fick ett fel

(index):1 Uncaught ReferenceError: callRect is not defined
at SVGRectElement.onclick ((index):1)

Svar #1

Trots att du använder setAttribute, använd listen-metoden över Renderer genom vilken du kan kalla komponentmetoder direkt inuti eventHandler

this.renderer.listen(rect, 'click', (evt) => {
  this.callRect();
  console.log('Clicking the rect', evt);
});

Relaterade artiklar