如何在Angular2中綁定li標籤的keydown事件？

使用(click)="onSelect(hero)，我可以綁定點擊事件li標籤。我也可以綁定mouseover事件li標記。但我無法綁定事件li標記。 li標籤支持click,mouseover,keydown propety，所以我想我可以使用事件（向下箭頭）導航到此列表框中的下一個項目。如何在Angular2中綁定li標籤的keydown事件？

我可以找的官方文檔在哪裏？

<div class = "body-container"> 
     <ul class = "heroes"> 
      <li *ngFor = "let hero of heroes" (click)="onSelect(hero)" (keydown)="onKeydown()" (mouseover)="onKeydown()" class="bl-list-item" [class.bl-list-item-checked]="hero === selectedHero"> 
       <div class="guide-label"> 
        <span style="width:50px" [class.fa-check]="hero === selectedHero" [class.li-fa-check]="hero === selectedHero"></span> 
        <div class="guide-code-column">{{hero.id}}</div> 
        <div class="guide-name-column">{{hero.name}}</div> 
       </div> 
      </li> 
     </ul> 
    </div> 

    export class SearchComponent { 
     heroes: Hero[] = []; 
     selectedHero: Hero; 

     constructor(private heroService: HeroService) { } 

     ngOnInit(): void { 
      this.heroService.getHeroes() 
      .then(heroes => this.heroes = heroes); 
     } 

     showDialog = false; 

     onSelect(hero: Hero): void { 
      this.selectedHero = hero; 
     } 

     onKeydown(): void { 
      console.log("onKeydown"); 
     } 
    }

來源

2016-11-24 niaomingjian

Google Google Google – WTFZane

我沒有找到任何有用的信息。我不知道我可以使用什麼關鍵字。 – niaomingjian

http://stackoverflow.com/questions/3149362/capture-key-press-or-keydown-event-on-div-element –

該元件具有以被聚焦併爲它需要輸入元件或具有tabindex設置爲>= "0"。

也Capture key press (or keydown) event on DIV element

見您可以捕獲鍵盤事件，全球像(window:keydown)="onKeydown($event)"但我不知道這是否有助於你的情況。

來源

2016-11-24 08:22:15

您基本上從事件類型開始，然後添加一系列點分隔修飾符。例如：

首先，限制。本地KeyEventsPlugin插件僅支持 keydown和keyup事件，而不是按鍵。而且，這些組合鍵只能綁定到特定的元素（或主機） - 插件不會支持全局「document：」或「window：」事件範圍。也沒有對瀏覽器覆蓋的隱式支持。意思是，如果您需要取消組合鍵的默認行爲，您必須自己動手（使用$ event.preventDefault（））。

keydown.a 
keydown.b 
keydown.c 
keydown.dot 
keydown.Spacebar 
keydown.meta.Enter 
keydown.alt.Enter 
keydown.control.Enter 
keydown.shift.Enter 
keydown.meta.o 
keydown.meta.s 
keydown.meta.f 
keydown.escape

「特殊鍵」修飾符：

ALT 控制元 - Mac上的Command鍵和Windows上的Windows鍵。 shift 然後有兩個替換鍵只是保持語法不中斷：

空間 - 或者，您可以使用「空格鍵」。點 - 由於修飾符是點分隔的。

<input 
    (keydown.Enter)="handleKeyEvent($event, 'Enter')" 
    (keydown.alt.Enter)="handleKeyEvent($event, 'ALT + Enter')"         (keydown.control.Enter)="handleKeyEvent($event, 'Control + Enter')" 
    (keydown.meta.Enter)="handleKeyEvent($event, 'Meta + Enter')" 
    (keydown.shift.Enter)="handleKeyEvent($event, 'Shift + Enter')" 
    (keydown.Escape)="handleKeyEvent($event, 'Escape')" 
    (keydown.ArrowLeft)="handleKeyEvent($event, 'Arrow Left')" 
    (keydown.ArrowUp)="handleKeyEvent($event, 'Arrow Up')" 
    (keydown.ArrowRight)="handleKeyEvent($event, 'Arrow Right')" 
    (keydown.ArrowDown)="handleKeyEvent($event, 'Arrow Down')" 
autofocus>

來源

2016-11-24 08:40:41 wuno

如何在Angular2中綁定li標籤的keydown事件？

回答

相關問題