如何在角度12中按下箭头键将div移动10px？

import { Component, HostListener, Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) { }

divPosition = 0;

@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
  // 检查按下的键是否是箭头键
  if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
    event.preventDefault(); // 阻止默认的键盘事件

    // 根据按下的箭头键更新div的位置
    if (event.key === 'ArrowUp') {
      this.divPosition -= 10; // 向上移动10px
    } else if (event.key === 'ArrowDown') {
      this.divPosition += 10; // 向下移动10px
    } else if (event.key === 'ArrowLeft') {
      this.divPosition -= 10; // 向左移动10px
    } else if (event.key === 'ArrowRight') {
      this.divPosition += 10; // 向右移动10px
    }

    // 更新div的样式
    this.renderer.setStyle(document.getElementById('myDiv'), 'transform', `translate(${this.divPosition}px)`);
  }
}

<div id="myDiv"></div>