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

这是关于Angular2

如何收听非表单元素（如

）上的事件（如单击）

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>

---

这里需要注意的一点是，如果我将side-bar.html中的

标记替换为

标记，则单击事件可以正常工作。但是由于某些原因，当我将

（单击）

处理程序添加到

元素时，它不起作用。
我不熟悉angular2的es5语法，但是li标记中的“this”看起来很奇怪。也许你可以先不带参数试试。（单击）应适用于任何图元

如果要传递html元素，其方法是：
如果目标元素包含子元素，则可能需要对要冒泡的click事件使用插入符号语法（示例）：



在您的情况下，它将是：

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


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

*ng表示已更改为*ngFor

将代码更改为：

(click)="liClicked($event)"

您可能希望在“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>


{{title}}




能否尝试将您的事件更改为
licliclicked（el:any）{alert（'a'）；}
谢谢您的回复。我需要这个JS代码。由于组织限制，我无法在当前计算机上编译
ES6
代码。：）您是否尝试过
（^click）
？
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);
  }
}

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

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

(click)="liClicked($event)"

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