Javascript 非表单元素上的Angular2单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32064425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 Click Event on non-form elements
提问by AdityaParab
This is about Angular2
这是关于Angular2
How do I listen to events (like Click) on the non-form elements like <li>?
我如何收听非表单元素上的事件（如 Click）<li>？
side-bar.html
边栏.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 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>标签替换side-bar.html 中的<button>标签，则单击事件可以正常工作。但是由于某种原因，当我(click)向<li>元素添加处理程序时它不起作用。
回答by Arnaud Boeglin
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”似乎很奇怪。也许您可以首先尝试不带参数。(click) 应该适用于任何元素。
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 元素，方法是： <li #elem *ng-for="#collection of collections" (click)="liClicked(elem)">
回答by Pardeep Jain
As of angular2 is in beta now so according to updated version of angular there is syntax change like this:
由于 angular2 现在处于测试阶段，因此根据 angular 的更新版本，语法有如下变化：
*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 单击事件的示例，这是工作示例：
Working Example
Update
更新
#is not changed with letin the *ngFor. so the update syntax will be
#let在 *ngFor 中没有改变。所以更新语法将是
*ngFor="let collection of collections; let i = index"
回答by Nish
Change your code to:
将您的代码更改为：
(click)="liClicked($event)"
回答by explodybits
If your target element contains children, you may want to use the caret syntax for the click event to bubble (example):
如果您的目标元素包含子元素，您可能希望对单击事件使用插入符号语法进行冒泡（示例）：
<li (^click)="onClick($event)">
In your case it would be:
在您的情况下，它将是：
<li *ng-for="#collection of collections" (^click)="liClicked(this)">
回答by Joselo
You may want to use the click event on the "a" element instead of the "li" element, for example:
您可能希望在“a”元素而不是“li”元素上使用单击事件，例如：
<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>
