Ein-Klick-Handler für mehrere Elemente in Angular 2

Question

Sagen wir, wir haben ein div mit 3 Links im Inneren.

<div class="wrap"> 
    <a class="link">link1</a> 
    <a class="link">link2</a> 
    <a class="link">link3</a> 
</div> 

Um einen Click-Handler für die Links in jQuery ordnen wir smth wie dies tun können: $('.wrap a').on('click', callback);.

Was ist der beste Ansatz dafür in Angular2?

Von dem, was ich gelernt, ich konnte einen einfachen (Klick) für jede Verbindung verwenden, wie: <a class="link" (click)="callback()">, aber für mich sieht es seltsam. Eine andere Option wäre, eine Direktive zu verwenden und smth wie <a class="link" [directive]="value"> zu machen, dieses mag ich mehr.

Gibt es eine noch bessere Umsetzung des beschriebenen Falles?

Answer 1

Das Click-Ereignis beschrieben wird Blase an die Mutter div, so dass Sie ein setzen könnte der Event-Handler dort.

<div class="wrap" (click)="clicked($event)"> 
     <a id="link1" class="link">link1</a> 
     <a id="link2" class="link">link2</a> 
     <a id="link3" class="link">link3</a> 
    </div> 

export class AppComponent { 

    clicked(event: MouseEvent) { 
     console.log(event.srcElement.id); 
    } 
    } 

Answer 2

Meiner Meinung nach der beste Weg dafür ist, Richtlinie zu verwenden und vielleicht den inneren HTML parsen eine gültige Verbindung zu komponieren, wie in here

Answer 3

Eigentlich hängt es davon ab, was Sie tun möchten. Aber wenn Sie nur einen ClickHandler zuweisen möchten, gehen Sie normalerweise mit der (Klick-) Direktive. Warum sieht das für dich seltsam aus?

Wenn Sie möchten, dass die ClickEvent innerhalb Sie Handler für den Zugriff übergeben Sie die $event Paramter auf Ihren Rückruf wie so: <a class="link" (click)="callback($event)">link</a>

, wenn Sie eine Sammlung von Links haben Sie über sie iterieren kann:

public links = ['link1','link2','link3'];

dann in der Vorlage:

<div class="wrap"> 
    <a class="link" *ngFor="let link of links">{{link}}</a> 
</div> 

Wenn Sie nur in Ihrem singlePageApplication navigieren möchten Sie in der Regel nur die routerLink Direktive verwenden.

<a routerLink="/my-path">link1</a> 

Answer 4

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div (click)="onClick($event)"> 
     <a id="link1" href="#" class="link">link1</a> 
     <a id="link2" href="#" class="link">link2</a> 
     <a id="link3" href="#" class="link">link3</a> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    } 
    onClick(event) { 
     alert(event.srcElement.id); 
    } 
} 

Arbeiten Plunkr