更改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中事件的函数名称？

回答

相关问题