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

Question

我在component.ts中有如下语法：

createMap() {
   `const content =` `<div class="text-center">
      <div class="col">
        <p (click)="${open()}">Open</p>
      </div>
    </div>`
}

open() {};

语法分配给变量，变量在传单中使用。我在同一个组件中有open() 方法。但是该方法在页面加载时运行，并且不适用于点击。

我也尝试了open() 没有${}，但该方法被视为字符串 - 没有参考。

Answer 1

这行代码：<p (click)="${open()}">Open</p> 正在构建一个字符串。而${open()}是将执行代码的结果插入到字符串中的语法。

因此，它运行代码open()，然后将该函数调用的结果插入到字符串中。

我不熟悉 angular 的语法，也不熟悉如何向元素添加事件侦听器。但我可以向你保证，你在做什么不是它。您需要对函数名称的引用，或者您需要一个内联的 javascript 字符串来执行，其中 angular 为您提供一些特殊的组件闭包，或类似的东西。意思是，没有 Angular 你会这样做：

函数的实际引用：

myParagraphElement.addEventListener('click', open.bind(this))

[或]

要执行的javascript文本行：

<p onClick="open()">Click Me</p> // Where open was on the window

我假设您与(click) 一起使用的角度语法应该是像<p (click)="open()">Click</p> 一样执行的javascript 文本行，并且该角度会假设该方法在类上，或者关于“角度组件”到上下文。但我猜这只会在你使用的任何“模板”HTML中工作，而不是仅仅生成一个字符串。但是如果没有看到你所有的代码，我将无法猜测。

Answer 2

将事件绑定到这样的方法：

<p (click)="open()">Open</p>

如果你想提取事件使用open($event)