Angular12中如何通过方向键或点击对应div控制目标div每次移动10px

前置准备 #

首先在你的组件类中定义两个变量存储位移偏移量，后续通过绑定动态样式控制中间div的位置，使用transform做偏移性能更优，不会触发页面重排。

// 组件类属性
offsetX: number = 0;
offsetY: number = 0;

然后在模板文件中给中间div绑定动态样式，同时给四个方向的控制div绑定点击事件：

<!-- 中间可移动div -->
<div class="center-box" [style.transform]="`translate(${offsetX}px, ${offsetY}px)`"></div>

<!-- 四个方向控制div -->
<div class="control left" (click)="goLeft()">左移按钮</div>
<div class="control right" (click)="goRight()">右移按钮</div>
<div class="control top" (click)="goUp()">上移按钮</div>
<div class="control bottom" (click)="goDown()">下移按钮</div>

补全点击事件逻辑 #

你提问中空缺的goLeft方法直接修改偏移量即可：

goLeft(ev:any){
  // 左移X轴坐标减10
  this.offsetX -= 10;
}

// 其余三个方向的点击逻辑参照如下
goRight() {
  this.offsetX += 10;
}
goUp() {
  this.offsetY -= 10;
}
goDown() {
  this.offsetY += 10;
}

补全键盘事件逻辑 #

首先引入HostListener监听全局键盘事件，你空缺的向下箭头逻辑直接调用已写好的goDown方法即可，不需要重复写逻辑：

import { HostListener } from '@angular/core';

// 类中添加键盘监听
@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
  if(event.key == "ArrowDown"){
    // 调用已封装的下移方法即可
    this.goDown();
    console.log(event.key);
  }
  // 其余方向键逻辑同理调用对应方法即可
  if(event.key == "ArrowLeft") this.goLeft();
  if(event.key == "ArrowRight") this.goRight();
  if(event.key == "ArrowUp") this.goUp();
}

可选优化 #

如果需要限制移动范围，只需要在修改offsetX/offsetY的时候增加边界判断即可，比如限制横向移动最大不超过200px，最小不小于-200px：

goLeft() {
  if(this.offsetX > -200) {
    this.offsetX -=10
  }
}

内容的提问来源于stack exchange，提问作者nano dev