在非表单元素上单击事件

This is about Angular2

这是关于Angular2

How do I listen to events (like Click) on the non-form elements like <li>?

如何侦听非表单元素(如

)上的事件(如单击)?

)上的事件(如单击)?

side-bar.html

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>

SideBarComponent

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 point to be noted here is that, if I replace <a> tag from side-bar.html with a <button> tag, the click event works fine. But for some reason, it doesn't work when I add (click) handler to <li> element.

这里需要注意的一点是，如果我从侧边栏中替换< A >标记。使用标记的html，单击事件可以正常工作。但是由于某些原因，当我向

元素添加(单击)处理程序时，它不能工作。

元素添加(单击)处理程序时,它不能工作。

4 个解决方案

#1

I am not familiar with the es5 syntax for angular2, but the "this" you have in your li tag seems weird. Maybe you can try without the parameter in a first place. (click) should work on any element.

我不熟悉angular2的es5语法，但是您在li标签中的“this”看起来很奇怪。也许您可以先尝试不带参数。(单击)应该在任何元素上工作。

If you want to pass the html element the way to do it is : <li #elem *ng-for="#collection of collections" (click)="liClicked(elem)">

如果您想传递html元素，方法是:

#2

As of angular2 is in beta now so according to updated version of angular there is syntax change like this:

由于angular2是在beta中所以根据最新版本的角度有这样的语法变化:

*ng-for changed to *ngFor

* 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 part is:

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}}

and here is the example of working with Angular2 Click Event on non-form elements here is the working example:
Working Example

这是在非表单元素上使用Angular2单击事件的示例，这里是工作示例:工作示例

Update

# is not changed with let in the *ngFor. so the update syntax will be

#在*ngFor中不会被修改。因此，更新语法将会是。

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

#3

Change your code to:

改变你的代码:

(click)="liClicked($event)"

#4

If your target element contains children, you may want to use the caret syntax for the click event to bubble (example):

如果您的目标元素包含子元素，您可能希望使用插入符号语法将单击事件变为bubble(示例):

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

In your case it would be:

就你而言，它将是:

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