如何在分配給組件內部變量的HTML代碼中綁定事件？

Question

我在component.ts中具有以下語法：

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

open() {};

語法已分配給變量，而變量在Leaflet中使用。 我在同一組件中有open()方法。 但是該方法在頁面加載時運行，並且不適用於click。

我也嘗試了不帶${} 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)