如何接受/拒绝角度下降

Question

angular的问题cdk软件包： 仅当放置条件为true时，我才想将红色div“拖动我”（见下文）拖放到蓝色放置区域中。

我的拖动工作正常（因此cdk库已正确加载），但是我的拖放不起作用，从不调用我的enterPredicate（）方法。任何想法 ？ （link cdk）

app.component.html

import { Component } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove, CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of heroes';
  state = '';
  position = '';

  dragStarted(event: CdkDragStart) {
    this.state = 'dragStarted';
  }

  dragEnded(event: CdkDragEnd) {
    this.state = 'dragEnded';
  }

  dragMoved(event: CdkDragMove) {
    this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }

  dropped(event: CdkDragDrop<string[]>) {
    console.log("dropped");
  }

  enterPredicate(drag?: CdkDrag, drop?: CdkDropList) {

    return false;
  };
}

app.component.html

<h1>{{title}}</h1>

<!--  ITEM TO BE DRAGGED -->
<div cdkDrag class="drag-box"
     (cdkDragStarted)="dragStarted($event)"
     (cdkDragEnded)="dragEnded($event)"
     (cdkDragMoved)="dragMoved($event)">
  drag me
</div>

<p>{{state}} {{position}}</p>

<!--   DROP  ZONE -->
<div cdkDropList
     (cdkDropListDropped)="dropped($event)"
     style="background-color:lightblue; width: 200px; height: 200px"
     [cdkDropListEnterPredicate]="enterPredicate(drag, cdkDropList)"
     >
  DROP   ZONE
</div>

<app-heroes></app-heroes>
<app-messages></app-messages>

我希望仅当enterPredicate（）为true时才能执行删除操作。

Answer 1

我怀疑您的函数定义中需要T。

enterPredicate(drag?: CdkDrag<string>, drop?: CdkDropList<string[]>)

在我添加类型之前，它对我不起作用。