Angular2 Click-Ereignis nicht-Formular-Elementen

Dies ist über Angular2

Wie höre ich auf Ereignisse (wie Mausklick) auf die nicht-form-Elemente wie <li>?

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

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

Einen Punkt zu beachten ist hier, dass, wenn ich ersetzen <a> tag aus side-bar.html mit einem <button> tag, das click-Ereignis funktioniert. Aber aus irgendeinem Grund, es funktioniert nicht, wenn ich (click) handler <li> element.

Sie könnten versuchen, ändern Sie Ihre Veranstaltung als liClicked (el: any) { alert('a'); }
Danke für Eure Reaktionen. Ich brauche JS-code für diese. Ich kann nicht kompilieren ES6 code bei meiner jetzigen Maschine aufgrund organisatorischer Einschränkungen. 🙂
Haben Sie versucht, mit (^click)?

InformationsquelleAutor AdityaParab | 2015-08-18

  1. 8

    Ich bin nicht vertraut mit den es5 syntax für angular2, aber die "das" haben Sie in Ihrem li-tag, scheint seltsam. Vielleicht können Sie versuchen, ohne die parameter in den ersten Platz. (klicken Sie auf) sollte auf jedem element.

    Wenn Sie möchten, übergeben Sie den html-element die Art und Weise, es zu tun ist : <li #elem *ng-for="#collection of collections" (click)="liClicked(elem)">

    InformationsquelleAutor Arnaud Boeglin

  2. 8

    Als der angular2 ist in der beta jetzt so nach aktualisierten version von angular gibt es syntax-änderungen wie diese:

    *ng-für geändert *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-Teil ist: 

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

    und hier ist das Beispiel für die Arbeit mit Angular2 Click-Ereignis nicht-Formular-Elementen hier ist das Beispiel:

    Beispiel

    Update

    # wird nicht geändert mit let im *ngFor. also die update-syntax

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

    InformationsquelleAutor Pardeep Jain

  3. 3

    Den code ändern zu:

    (click)="liClicked($event)"

    InformationsquelleAutor Nish

  4. 2

    Wenn Ihr Ziel-element enthält Kinder, die Sie verwenden möchten, können Sie das caret-syntax für das click-Ereignis, um bubble (Beispiel):

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

    In deinem Fall wäre es:

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

    InformationsquelleAutor explodybits

Schreibe einen Kommentar