Angular 如何在分配给组件内部变量的HTML代码中绑定事件?
我在component.ts中有以下语法:Angular 如何在分配给组件内部变量的HTML代码中绑定事件?,angular,Angular,我在component.ts中有以下语法: createMap() { `const content =` `<div class="text-center"> <div class="col"> <p (click)="${open()}">Open</p> </div> </div>` } open() {}; createMap(){ `常量内容=`` 打开 `
createMap() {
`const content =` `<div class="text-center">
<div class="col">
<p (click)="${open()}">Open</p>
</div>
</div>`
}
open() {};
createMap(){
`常量内容=``
打开
`
}
open(){};
语法被分配给变量,变量在传单中使用。我在同一个组件中有open()
方法。但是,该方法在页面加载时运行,不适用于单击
我还尝试了不使用
${}
的open()
,但该方法被视为字符串-无引用。将事件绑定到如下方法:
<p (click)="open()">Open</p>
打开
如果要提取事件,请使用
open($event)
这行代码:open
正在生成字符串。${open()}
是将执行代码的结果插入字符串的语法
因此,它运行代码open()
,然后将该函数调用的结果插入字符串中
我不熟悉angular的语法,也不熟悉如何向元素添加事件侦听器。但我可以向你保证你在做什么,不是吗。您需要一个对函数名的引用,或者需要一个内联的javascript字符串来执行,angular或者为您提供一些特殊的组件闭包,或者类似的东西。意思是,如果没有角度,您会:
对函数的实际引用:
myParagraphElement.addEventListener('click',open.bind(this))
[或]
要执行的javascript文本行:
单击我
//打开窗口的位置
我假设您在
(click)
中使用的angular语法应该是javascript的文本行,可以像click一样执行,angular将假设该方法在类上,或者在上下文方面是“angular component”。但我猜这只适用于您正在使用的任何“模板”HTML,而不仅仅是生成字符串。但是如果没有看到您的所有代码,我将无法猜测。
Open
@jakubm我尝试了这个open()
在这里被认为是字符串。为什么open()
是字符串?你能改变吗?您应该有一个对open
方法的引用,而不是字符串。@ConnorsFan是因为它在方法内部吗?请参阅更新的问题。答案可能在(指)。动态创建HTML时无法绑定事件。请查看此处:它未被引用。感谢您的解释。根据这篇文章:。这不可能是我想要的。对于纯JavaScript,您的答案应该很好,但Angular不允许在innerHTML中使用onClick。(单击)
将是非法的HTML,所以我不会走那么远。前两个示例是针对本机javascript的。第三个似乎对模板文件中的angular有效,但同样,作为本机字符串没有意义。