Angular 如何在分配给组件内部变量的HTML代码中绑定事件?

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(){ `常量内容=`` 打开 `

我在component.ts中有以下语法:

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有效,但同样,作为本机字符串没有意义。