Angular2 evento Click su elementi non-forma

Question

Si tratta di Angular2

Come faccio ad ascoltare gli eventi (come Click) sugli elementi non-forma come <li>?

laterale 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] 
    }) 
]; 

Un punto da notare qui è che, se sostituisco <a> tag da lato bar.html con un tag <button>, la l'evento click funziona bene. Ma per qualche ragione, non funziona quando aggiungo il gestore (click) all'elemento <li>.

Answer 1

Non ho familiarità con la sintassi es5 per angular2, ma il "questo" che hai nel tag li sembra strano. Forse puoi provare senza il parametro in un primo momento. (clic) dovrebbe funzionare su qualsiasi elemento.

Se si desidera passare l'elemento HTML il modo per farlo è: <li #elem *ng-for="#collection of collections" (click)="liClicked(elem)">

Answer 2

Se il vostro elemento di destinazione contiene i bambini, si consiglia di utilizzare la sintassi punto di inserimento per l'evento click di bolla (esempio):

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

nel tuo caso sarebbe:

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

Answer 3

Dal angular2 è in beta ora così in base alla versione aggiornata di angolare c'è sintassi cambiamento lik e questo:

* ng-for cambiato in * 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); 
    } 
} 

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

e qui è l'esempio di lavorare con Angular2 evento Click sulla non -forma elementi qui è l'esempio di lavoro:
Working Example

Aggiornamento

# non è cambiato con let nel * ngFor. così la sintassi aggiornamento sarà

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

Answer 4

modificare il codice per:

(click)="liClicked($event)"