映射箭头键可在Angular中的照片之间切换

Question

我有一个要在Angular 6应用程序的mat-dialog控件中显示的照片查看器：

<mat-dialog-content>
    <img 
    (keydown.ArrowLeft)="previous()" 
    (keydown.ArrowRight)="next()" 
    src="{{photo.filename}}" />
</mat-dialog-content>

<mat-dialog-actions>
    <button (click)="previous()">Previous</button>
    <button (click)="next()">Next</button>
</mat-dialog-actions>

如果我单击按钮，则next（）和previous（）函数可以工作，但是我试图将它们映射到键盘上的向左和向右箭头键，并且不起作用。

我做错了什么？

Answer 1

您必须绑定到component.ts中的文档：

@HostListener('document:keydown.arrowleft')
previous(): {

}


@HostListener('document:keydown.arrowright')
next(): {

}