javascript Angular ：在的子元素的单击处理程序中访问组件属性和函数的最佳方式< svg>

mfuanj7w 于 2023-02-11 发布在 Java

关注(0)|答案(1)|浏览(113)

我和这个人犯了同样的错误：Add onclick event to SVG element
但我有它在Angular ，这使它更难处理。
我希望单个SVGPathElement是可点击的，并在这个点击处理程序中访问组件属性和函数。但是这给了我错误“属性未定义”或“函数不存在”。
根据这个回答：Add onclick event to SVG element这是因为所有的JavaScript必须包含在SVG中才能运行。
但是我甚至不能做上面提到的Add onclick event to SVG element建议的事情，因为我得到了一个错误，可能是因为Angular在解析html时不能创建组件。

我也看了http://xn--dahlstrm-t4a.net/svg/html/from-svg-to-parent-html-script.html（在上面答案的评论中提到），但那给了我和上面图片中一样的错误。
现在回答我的问题的第二个要求是：
我计划有许多不同的svg，并以不同的方式与它们交互。所以手动粘贴一些<script>到svg对我来说不是一个可伸缩或可维护的解决方案。所以实际上我宁愿不这样做的html与<script>标签。
如果有人有一个很好的解决方案，以解决我的两个inquries在Angular ，我将是伟大的。

附加信息：

我使用的是离子框架，但我认为在这种情况下这并不重要
一种可能的替代解决方案：
你可以使用ReactJS而不是Angular。SVGPathElement<->组件交互在ReactJS中工作，不需要手动做任何事情。我不知道为什么，但没有这样的错误，可能是因为组件不是一个类，而是一个函数。这将是伟大的知道确切的原因！我不想使用ReactJS，因为我不熟悉它。但也许它是我最好的选择，只是切换框架，因为SvgPathElement<->组件交互是我的移动的应用程序的一个关键部分（它就像seterra移动应用程序（https://play.google.com/store/apps/details?id=com.seterra&hl=en&gl=US））。

JavaScript

来源：https://stackoverflow.com/questions/75413937/angular-best-way-to-access-component-properties-functions-in-click-handler-of

1条答案

按热度按时间

jk9hmnmh1#

我找到了罪魁祸首：

不要执行此操作（由于某种原因，Angular 不允许执行此操作）：

ngOnInit() {
    document.querySelectorAll('.area').forEach((element: Element) => {
            element.addEventListener('click', this.clickHandler);
        }
    );
}

相反，您必须手动添加单击处理程序，如下所示：

<svg id="svgroot">
    <path ... (click)="clickHandler()">

如果有人知道如何通过编程方式添加单击处理程序来实现这一点，那么这将使解决方案更加自动化/可伸缩/可维护。
出于某种原因，以编程方式将单击处理程序添加到SvgPathElement在ReactJS中是有效的，这可能是由于框架生成组件的方式之间存在一些内部差异。

赞(0）回复(0）举报 2023-02-11

我来回答

javascript Angular ：在的子元素的单击处理程序中访问组件属性和函数的最佳方式< svg>

附加信息：

1条答案

我找到了罪魁祸首：

相关问题

热门标签

最新问答