在 Angular 中的 SVG 内捕获类的点击事件答案

【问题标题】：Catch the click event on class inside SVG in Angular在 Angular 中的 SVG 内捕获类的点击事件
【发布时间】：2020-05-23 09:32:30
【问题描述】：

在我的 Angular 9 应用程序中，我需要将 svg 文件添加为交互式图像。

svg 本身位于my-file.svg 中，如下所示：

<svg>
    <polygon class="my-polygon-class" points="31.7793,138.705 39.7885,138.705 39.7885,128.848 31.7793,128.848 "/>
    <!-- lots of other polygons and paths -->
</svg>

我有一个组件：

@Component({
  selector: 'car-view',
  templateUrl: './car-view.component.html',
  styleUrls: ['./car-view.component.scss']
})
export class CarViewComponent {
    constructor() {
    }

    elementClicked() {
    }
}

在car-view.component.html 中，我将此 svg 包含为：

<div class="car-view">
    <object data="../assets/my-file.svg" type="image/svg+xml"></object>
</div>

如何在my-polygon-class（位于 svg 内）的点击事件中调用 CarViewComponent 内的 elementClicked() 函数？我还需要切换另一个类（比如element-clicked），以便将 svg 多边形标记为已单击。

【问题讨论】：

标签： javascript html angular svg

【解决方案1】：

这样添加

<div (click)='elementClicked()'>
<svg>
    <polygon class="my-polygon-class" points="31.7793,138.705 39.7885,138.705 39.7885,128.848 31.7793,128.848 "/>
    <!-- lots of other polygons and paths -->
</svg>
</div>

【讨论】：

这是一种方法，是的，但是我的 svg 文件大约有 500 行，我将在多个组件中需要它。我需要找到一种方法将此 svg 作为单独的文件/模板/等包含到模板中，而不是在整个应用程序中复制和粘贴 svg 的内容
你需要点击每个svg吗？？
是的，我需要它在我添加到的所有组件中都是可点击的。
你可以将它创建为一个单独的组件，然后在任何地方添加它的选择器，如果你想在它的点击上对数据做一些事情，也可以把一些输入属性比如数据放到这个
为什么elementClicked()没有参数？我在想elementClicked($event)，但你肯定知道***点击了哪个***元素？

【解决方案2】：

做一件事，创建一个组件并提供模板 url 作为这个 svg 的 url。然后单击将事件输出到父组件。例如：-

https://levelup.gitconnected.com/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1

<polygon class="my-polygon-class" points="31.7793,138.705 39.7885,138.705 39.7885,128.848 31.7793,128.848 " (click)="elementClicked()"/>

【讨论】：

(click)="elementClicked()" 破坏了 svg。 onclick="elementClicked()" 不会破坏 svg 本身，但 elementClicked() 函数似乎超出范围
你能提供一个stackblitz吗？
做一件事创建一个组件并提供模板 url 作为这个 svg 的 url。然后单击将事件输出到父组件。例如：- levelup.gitconnected.com/…
谢谢，但这对我不起作用，因为除了 svg 之外，html 模板中还有很多其他内容。这就是为什么我需要包含作为单独的图像/文件/模板/等