更新

Question

这是关于 Angular2

如何在<li>等非表单元素上收听事件（如点击）？

侧-一个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>

SideBarComponent

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>标记替换side-bar.html中的<button>标记，则点击事件可以正常工作。但由于某些原因，当我将(click)处理程序添加到<li>元素时，它不起作用。

Answer 1

我不熟悉angular2的es5语法，但是＆＃34;这个＆＃34;你的li标签看起来很怪异。也许你可以在没有参数的情况下尝试。（点击）应该适用于任何元素。

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

Answer 2

由于angular2现在处于测试阶段，因此根据角度的更新版本，会出现如下语法更改：

* ng-for已更改为* ngFor

export class AppComponent { 
  collections: Array<any>= [];
  selected:string= null; 
  constructor(){
    this.collections = ["Collection-1", "Collection-2", "Collection-3", "Collection-4", "Collection-5"];
  }
  FunCalled(a){
    this.selected= a;
    console.log(a);
  }
}

HTML部分是：

<div class="col-sm-3 col-md-2 sidebar">
    {{title}}
    <ul class="nav nav-sidebar">
        <li *ngFor="#collection of collections #i=index" (click)="FunCalled(collection)">
            <a href="#">{{ collection }}</a>
        </li>
    </ul>
</div>

Selected Value is : {{selected}}

以下是在非表单元素上使用Angular2 Click Event的示例，这是工作示例：
Working Example

更新

{ng> #未在* ngFor中使用let进行更改。所以更新语法将是

*ngFor="let collection of collections; let i = index"

Answer 3

如果您的目标元素包含子元素，您可能希望使用click事件的插入符语法来冒泡（示例）：

<li (^click)="onClick($event)">

在你的情况下，它将是：

<li *ng-for="#collection of collections" (^click)="liClicked(this)">

Answer 4

您可能要在“ a”元素而不是“ li”元素上使用click事件，例如：

<div class="col-sm-3 col-md-2 sidebar">
    {{title}}
    <ul class="nav nav-sidebar">
        <li *ngFor="#collection of collections #i=index">
            <a href="#" (click)="FunCalled(collection)">{{ collection }}</a>
        </li>
    </ul>
</div>

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

4 个答案:

更新