Angular2 - 在动态添加的 HTML 中捕捉/订阅(点击)事件

2023-12-24

我正在尝试注入一个包含(click)事件到 Angular2 模板中。加载 DOM 后很久,就会从后端动态检索字符串。 Angular 无法识别注入的内容也就不足为奇了(click) event.

示例模板:

<div [innerHTML]="test"></div>

后端给出的示例字符串:

var test = "When ready, <span (click)=\"itemClick($event)\">click me</span>."

Angular 组件中的函数调用示例:

itemClick(event) {
   debugger;
}

My next guess would be to try having Angular subscribe or catch a plain-old javascript event, so the string would then be:
var test = "When ready, <span onClick=\"itemClick($event)\">click me</span>."

果然,我收到一个错误itemClick is not defined,所以我知道它正在寻找那个 javascript 函数。

所以问题:我怎样才能让 Angular2 订阅这个事件或函数?


声明性事件绑定仅在组件模板的静态 HTML 中受支持。
如果要订阅动态添加的元素的事件,则需要强制执行。

elementRef.nativeElement.querySelector(...).addEventListener(...)

或类似的。

如果你想保证 WebWorker 安全,你可以注入Renderer

constructor(private elementRef:ElementRef, private renderer:Renderer) {}

并使用

this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});

注册事件处理程序。

也可以看看在 Angular 2 中动态添加事件监听器 https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 - 在动态添加的 HTML 中捕捉/订阅(点击)事件 的相关文章

随机推荐

  • 如何在 OpenGL 中可视化深度纹理?

    我正在研究阴影贴图算法 我想调试它在第一次传递时生成的深度图 但是 深度纹理似乎无法正确渲染到视口 有没有简单的方法可以将深度纹理显示为灰度图像 最好不使用着色器 您可能需要更改深度纹理参数以将其显示为灰度级别 glTexParameter
  • 使用 scipy.optimize 动态选择要最小化 python 中函数的参数

    我有一个函数 它接受变量列表作为参数 我想使用 scipy optimize minimize 最小化这个函数 问题在于 它是在运行时决定应该对参数列表中的哪个变量进行最小化的 所有其他变量将获得固定值 让我们举个例子来说明一下 a 1 c
  • require 的行为(静态 + 动态)[ RAKU ]

    我的问题与以下行为有关require当与所需命名空间的静态或动态解析一起使用时 我将尝试表达我对事物的理解 1 将 require 与文字一起使用 require MODULE 在这种情况下 编译器会检查 MODULE 是否已被声明为符号
  • 在运行时保存并重新加载 app.config(applicationSettings)

    我已将应用程序的配置存储在 app config 中 通过 Visual Studio 我在项目属性对话框的设置选项卡上创建了一些应用程序密钥 然后我在应用程序级别 而不是用户级别 设置了该密钥 Visual Studio 自动生成以下 x
  • 在操作方法中填充模型后对话框未更新

    我正在使用 primefaces 对话框 我有一个项目列表 每当我选择一个项目时 我希望对话框显示该项目名称 然而 这并没有发生 该对话框根本不显示任何名称 而不是显示项目名称 我在下面发布了我的代码
  • NSubstitute ILogger .NET Core

    我正在尝试围绕异常处理编写单元测试 以便可以验证我的记录器是否正确记录了异常 我使用 NSubstitute 作为模拟框架Microsoft Extensions Logging ILogger我必须遵循我的测试 Fact public v
  • 链接:警告 LNK4098:defaultlib 'MSVCRT' 与其他库的使用冲突;使用 /NODEFAULTLIB:库

    当我尝试构建与 libeay32 lib 链接的源代码时 我已经从 OpenSSL 源本地构建了这个 我遇到了上述警告 LINK 警告 LNK4098 defaultlib MSVCRT 与其他库的使用冲突 使用 NODEFAULTLIB
  • GIT-SVN克隆命令执行没有错误,但本地master分支丢失

    我正在尝试使用 GIT SVN 但在启动时遇到问题 我可以克隆 svn 存储库 或使用 git svn init 然后使用 git svn fetch 不会出现任何错误 但在命令停止处理后 git 存储库为空 并且没有本地主分支 我的 sv
  • 某些客户端的 HTTP 标头的字符被随机替换

    正在进行网络流量和日志分析 但有很多从客户端传递的格式错误的标头 这些字符被转调或替换为 x 有谁知道它们来自哪里或为什么 这是某种安全尝试 还是更邪恶的行为 例子 xroxy connection Keep Alive cneoction
  • 有人在 Solaris 10x86 上安装了 Rails 3

    我想要一种在未连接到互联网的 Solaris 10 x86 服务器上安装 Rails 3 的简单方法 我可以下载文件并刻录到 DVD 或记忆棒并以这种方式安装 有些软件包是最好的 因为并不真正期待从源代码编译 有没有人做过这个或看过任何有关
  • 实体框架代码优先迁移和 Firebird

    我正在尝试在 Firebird 2 5 数据库上启用迁移 我正在使用 VS2015 ADO 驱动程序和实体提供程序已安装并正常工作 我对数据库进行了逆向工程 进行了必要的更改以使其正常工作 我可以在包管理器控制台上执行启用迁移 并添加迁移
  • 将 vCard 数据直接添加到系统地址簿

    我正在设计一个QR码阅读器 它需要检测并导入vCard格式 vcf 的联系人卡片 有没有办法直接将名片数据添加到系统地址簿中 或者我需要自己解析vCard并单独添加每个字段 如果您在 iOS 5 或更高版本上运行 以下代码应该可以解决问题
  • PySpark:搜索文本和子集数据框中的子字符串

    我是全新的pyspark并想翻译我现有的pandas python代码到PySpark 我想子集我的dataframe这样只有包含我要查找的特定关键字的行 original problem 字段被返回 下面是我在 PySpark 中尝试的
  • 是否可以使用一个 Set-Cookie 设置多个 cookie?

    一个HTTP Set Cookie指令只能保存一个cookie 对吗 我的意思是 一个单name value pair Netscape 的原始 cookie 规范 参见这个缓存版本 http web archive org web 200
  • 如何在Ubuntu 15.10中安装最新的JMeter?

    当我尝试使用 apt get install JMeter 在 Ubuntu 15 10 中安装 Apache JMeter 时 它会安装旧版本 2 11 但是 我尝试下载最新的 JMeter 3 0 版本 并在尝试运行时jmeter ja
  • 返回延迟承诺对象并解决它

    我有一个形式的函数 get members function var group id gid val if this val group id return var deferr Deferred get url done functio
  • 模板多态不起作用?

    我正在构建一个小型模板层次结构并尝试利用类多态性 下面是一些示例代码 无法编译 来演示它 template
  • SwiftUI 如何调整背景颜色的亮度,而不是所有子视图

    如何使亮度只影响视图的背景颜色而不影响其子视图 我希望文本保持白色 但背景变暗 这段代码 struct ListCell View let brightness Double var body some View VStack HStack
  • Python 中的自定义“with open()”语句:生成器没有产生错误

    我有一个文件类 您可以从中解析数据 写入数据等 我想从任何应用程序中使用它 如下所示 f MyFileClass init method puts a lot of default data in object with f open as
  • Angular2 - 在动态添加的 HTML 中捕捉/订阅(点击)事件

    我正在尝试注入一个包含 click 事件到 Angular2 模板中 加载 DOM 后很久 就会从后端动态检索字符串 Angular 无法识别注入的内容也就不足为奇了 click event 示例模板 div div 后端给出的示例字符串