Question

我刚接触过角形，正在寻找一种当用户通过按“ r”键拖动它来旋转作品时使用的技术。我最初的想法是将“ item” css类的 flex-direction：column 交换为 flex-direction：row

.item {
  display: flex;
  flex-direction: column; /* alternate between row & column*/  
   margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

我的问题是，这可能吗？我的另一个想法是必须对item-column和item-row进行分类并交换它们，但是即使这样做，我也不知道如何访问item.component.ts中的元素。我知道使用.item：active选择器可以到达该元素，但不知道如何从控制器执行该操作。这是我到目前为止的代码：https://stackblitz.com/edit/angular-cdk-drag-and-keypress

Answer 1

使用拖动事件：

<div draggable="true" (dragstart)="onDragStart($event)" (dragend)="onDragEnd($event)" class="item">
  <div class="piece" *ngFor="let p of [].constructor(itemSize); let i = index">i</div>  
</div>

然后在您的ts中，将活动元素保持在变量中，以便keyup事件可以识别出哪个元素是活动的：

export class ItemComponent implements OnInit {

  @Input() itemSize: number;
  draggingElement : Element;

  ngOnInit() {
    if (!this.itemSize) {
      throw new TypeError("'itemSize' is required");
    }    
  }

  onDragStart(e){
    this.draggingElement = e.target
  }

  onDragEnd(e){
    this.draggingElement = null;
  }

  @HostListener('window:keyup', ['$event'])
  keyEventUp(event: KeyboardEvent) { 
    if(event.key.toLowerCase() === "r") {     
      if(this.draggingElement) {
         console.log(this.draggingElement);
      }    
    }
  }  
}

在angular中更改活动元素的CSS样式

1 个答案: