Angular 2 事件绑定使用插值在模板内不起作用答案

【问题标题】：Angular 2 event binding use interpolation doesn't work inside templateAngular 2 事件绑定使用插值在模板内不起作用
【发布时间】：2016-06-02 03:47:49
【问题描述】：

我有简单的点击事件绑定

@Component({template:` <div ({{eventStr}})="do-log()">DoLog</div>`})
export class AppComponent {
    eventStr:string="click";
    do-log(){
        console.log("ckp");
    }
}

当然，如果将({{eventStr}}) 更改为(click)，它会起作用。我尝试了多种方式，例如(${eventStr}) ,(eventStr)。我不明白，在(click)="do-log()"里面，这个click不是字符串还是其他什么类型？我想使用 eventStr 而不是 click 因为我想动态更改事件类型，例如滑动。

更新： 我知道@HostBinding 和renderer.listen 有两种方式，但是我有不同的用例，并找到了这样的方式：在父组件模板中，例如：

 <child-cmp eventType="swipe">Swipe</child-cmp><child-cmp eventType="click">Click</child-cmp>

在子组件模板中像：

<div><button (eventType)="dosomething_accordingTo_diff_touch_events()"></button></div>

当然是@Input eventType:string。它不起作用。我猜如果eventType不是字符串而是事件对象，其实(eventType)==("swipe") or==("click")，不等于(swipe)或(click)。那么有没有一种方法可以让(eventType)==(swipe) 在模板中？

【问题讨论】：

据我了解，您想将动态事件侦听器添加到div 参考此stackoverflow.com/questions/35080387..
在事件绑定中 (eventname)="dosomething" (eventname) 必须是模板中的静态文本。您无法从某些输入中读取它或以任何方式动态设置它，如上面的评论或下面的答案中所解释的。您必须按照已经提供的链接中的说明强制执行。
理解Madhu和drawmoore的解释，谢谢大家。但我仍然希望有人能解释角度模板是如何工作的，以及为什么我们可以在 html 中使用动态的一些变量，例如 jquery 中的'
'，如果这里合适的话。
跨度>

标签： angular

【解决方案1】：

你不能那样做。

绑定表达式必须是可静态分析的，因此您不能动态生成它们。锚点 (discussion here) 也是如此。

【讨论】：