Angular 8 |模板中的动态keydown绑定

Question

背景

我的模板会生成一系列按钮，这些按钮由0 to 9中的索引编号。

每个按钮必须侦听唯一的数字(keydown.[0...9])事件。

问题

当然有效：

<button
  (document:keydown.0)="doSomething(event)"`>
  bla
</button>

这不是，尝试使用索引指定keydown事件：

<ng-container *ngFor="let elem of elems; index as index;">

  <button
    (document:keydown[index])="doSomething(event)"`>
    bla
  </button>

</ng-container>

问题

如何在Angular 8模板中动态绑定事件监听器？

我不想将通用的@HostListener事件侦听器用作通用方法或使用任何其他解决方法。

我还尝试了上述语法的变体，尝试指定具体的数字键，但没有乐趣。

Answer 1

我确定我丢失了一些东西，但是对我来说，在按钮中没有任何用处（document：keydown.0）。您使用的按钮（单击）。您可以使用renderer2来控制键盘键，例如

  constructor(private renderer:Renderer2,
  @Inject(DOCUMENT) private document: Document){}
      ngOnInit()
      {
        for (let i=0;i<=9;i++)
         this.renderer.listen(this.document, 'keydown.'+i, this.handler)
      }
      handler = (e) => {
            e.preventDefault()
            console.log(e,e.keyCode,e.key);
      };

或fromEvent'rxjs / operator'

   fromEvent(document, 'keydown').pipe(filter(
       (e:KeyboardEvent)=>e.keyCode>=48 && 
                                e.keyCode<=57))
       .subscribe((res:KeyboardEvent)=>{
           console.log(res,res.key)
        })

顺便说一句，看看这个article from Netanel Basasl