javascript - 非表单元素上的 Angular2 单击事件

Question

这是关于 Angular2

如何在非表单元素(如 <li>)上监听事件(如 Click) ？

side-bar.html

<div class="col-sm-3 col-md-2 sidebar">
    {{title}}
    <ul class="nav nav-sidebar">
        <li *ng-for="#collection of collections" (click)="liClicked(this)">
            <a href="#">{{ collection }}</a>
        </li>
    </ul>
</div>

侧边栏组件

function SideBarComponent(){
    this.title = "Collections";
    this.collections = ["Collection-1", "Collection-2", "Collection-3", "Collection-4", "Collection-5"];
    this.liClicked = function(el){
        alert('a');
    }
}
SideBarComponent.annotations = [
    new angular.ComponentAnnotation({
        selector:'side-bar'
    }),
    new angular.ViewAnnotation({
        templateUrl: 'templates/side-bar.html',
        directives:[angular.NgFor]
    })
];

这里要注意的一点是，如果我替换<a>带有 <button> 的 side-bar.html 标签标签，点击事件工作正常。但出于某种原因，当我添加 (click) 时它不起作用处理程序到 <li>元素。

Answer 1

我不熟悉 angular2 的 es5 语法，但是你的 li 标签中的“this”看起来很奇怪。也许您可以先尝试不使用参数。 (点击)应该适用于任何元素。

如果你想传递 html 元素，方法是:<li #elem *ng-for="#collection of collections" (click)="liClicked(elem)">