Wie füge ich einen Listener zur ul li-Liste hinzu, die sich in der Komponentenvorlage befindet?

<ul #list>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

Ich habe versucht:

@ViewChild("list", { static: false }) list: ElementRef;

ngOnInit() {
   list.addEventListener('keydown', this.onKeyDown);
}

 onKeyDown = (e) => { console.log(e); // event keydown}

Aber bei mir funktioniert es nicht.

-2
OPV 19 Feb. 2020 im 22:49

4 Antworten

Beste Antwort

Das brauchen Sie:

HTML:

<ul #list tabindex="0">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

TS:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  @ViewChild("list", { static: false }) list: ElementRef;

  ngAfterViewInit() {
    this.list.nativeElement.focus();
    this.list.nativeElement.addEventListener('keydown', this.onKeyDown);
  }

  onKeyDown = (e) => { console.log(e); }

}

Stackblitz: Angular-Add-Listener-to-ul-li- Liste

1
Oussail 19 Feb. 2020 im 20:39

Oder Sie sollten in Ihrem Beispiel nativeElement hinzufügen

 list.nativeElement.addEventListener('keydown', this.onKeyDown);
1
Ghoul Ahmed 19 Feb. 2020 im 20:00

Die eckige Art der Behandlung von Ereignissen besteht darin, Handler wie folgt an die Vorlage anzuhängen:

handleUlClick(e) {console.log(e)}
...
<ul (click)="handleUlClick($event)">
//whatever
</ul>
-1
Andrei 19 Feb. 2020 im 19:52

Sie brauchen dazu nicht ViewChild. Verwenden Sie einfach das Ereignis keydown. Stellen Sie sicher, dass Sie tabindex hinzufügen, um das Element fokussieren zu können.

https://stackblitz.com/edit/angular-umck67

HTML

<ul tabindex=-1 (keydown)="onKeyDown($event)">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

Komponente:

onKeyDown = (e) => { console.log(e);  }
1
Stavm 19 Feb. 2020 im 19:56