如何向Angular 5模板添加更多SVG或Html元素/事件？

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  @ViewChild('mySvg', { static: true }) mySvg: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    // 添加事件监听器到SVG元素
    this.renderer.listen(this.mySvg.nativeElement, 'click', () => {
      console.log('SVG被点击了！');
    });
  }
}

<svg #mySvg>
  <rect x="0" y="0" width="100" height="100" fill="red"></rect>
</svg>

<button (click)="myButtonClick()">点击我</button>

<app-my-component></app-my-component>