更改Angular 2中事件的函數名稱？

我想動態地改變與事件關聯的功能。我嘗試這樣做：更改Angular 2中事件的函數名稱？

(click) = "{{myFunction}}"

但我得到一個錯誤「分析器錯誤：GOT插值（{{}}），其中預計表達」。我需要根據條件將TypeScript myFunction更改爲一個或其他函數。

來源

2017-05-06 user33276346

這是不是要去工作。你怎麼知道組件中的不同方法名稱？您將不得不提取所有方法名稱並找出要綁定的方法。這意味着您需要相應地更改您的模板。 – wannadream

如果用戶點擊按鈕，屏幕上會發生某些事情，但我需要在禁用按鈕功能幾秒鐘之後才允許用戶執行相同的功能以避免錯誤。因此，在用戶單擊後，我將函數名稱更改爲任意幾秒鐘，然後將其恢復正常 – user33276346

在Angular中無法實現和支持替換事件名稱。您可以將布爾值綁定爲[禁用]來控制可用性。 – wannadream

我爲您建立一個plunker：https://plnkr.co/edit/se3kz5AF4sSmgHue8W7u?p=preview

onImgClick() { 
    if(this.imgDisabled){ 
     console.log('img disabled'); 
     return; 
    } 
    alert('clicked'); 
    this.imgDisabled = true; 
    console.log('img disabled'); 
    let that = this; 
    setTimeout(() => { 
     that.imgDisabled = false; 
     console.log('img enabled'); 
    }, 5000); 
}

來源

2017-05-06 05:49:27 wannadream

使用'that'的目的是什麼？ – 2017-05-06 08:45:06

this in（）=> {this。 }將是該函數的參考。您需要使用它來訪問組件。 – wannadream

你需要對箭頭功能進行調整。 '（）=> {this中的'this'。 }'將**不**作爲「函數的參考」。它將是'onImgClick'的'this'，它是它的一部分。這個概念是箭頭功能的基礎。 – 2017-05-06 15:13:22

來源

2017-05-06 05:41:55

感謝您的幫助，此工作非常簡單。我相信我在其他地方看到了這種模式，它是否有名字？ – user33276346

的技術術語，你正在嘗試做的是「節流」。嘗試搜索。許多庫將以某種形式提供該功能。大多數情況下，它被實現爲「高階函數」：一個函數，它接受一個底層函數並返回一個被限制的版本。其基本邏輯是：

function throttle(fn, ms) { 
    let last = 0; 

    return function() { 
    const now = +new Date(); 

    if (now > last + ms) { 
     last = now; 
     fn.apply(this, arguments); 
    } 
    }; 
}

現在在你的組件：

(click)="myFunction()" 

myFunction = throttle(this.click);

來源

2017-05-06 08:53:02

更改Angular 2中事件的函數名稱？

回答

相關問題