Angular2 Нажмите Событие на элементах без формы

Это примерно 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 отлично работает. Но по какой-то причине это не работает, когда я добавляю обработчик (click) к элементу <li>.

Ответы

Ответ 1

Я не знаком с синтаксисом es5 для angular2, но "this", который у вас есть в вашем теге li, кажется странным. Возможно, вы можете попробовать без параметра в первую очередь. (щелчок) должен работать над любым элементом.

Если вы хотите передать элемент html, это способ: <li #elem *ng-for="#collection of collections" (click)="liClicked(elem)">

Ответ 2

Как и для angular2, теперь он находится в состоянии бета, поэтому согласно обновленной версии angular происходит синтаксическое изменение:

* ng - для измененного на * 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 на неформатных элементах здесь - рабочий пример:
Рабочий пример

Update

# не изменяется с помощью let в * ngFor. поэтому синтаксис обновления будет

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

Ответ 3

Измените свой код на:

(click)="liClicked($event)"

Ответ 4

Если ваш целевой элемент содержит дочерние элементы, вы можете использовать синтаксис каретки для события click для пузырьков (пример):

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

В вашем случае это будет:

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