我無法在 WebStorm Angular Material 項目中使用丟棄的事件

Question

雖然我從 1991 年開始編程（是的，我已經老了），但這是我第一次深入研究 Angular，我正在嘗試使用 WebStorm 2021.2.3 來創建一個前端 Restful 界面。 最終的結果最終將是桌面/服務器圖標的可拖動圖像，每個圖標上都有一個菜單，可以啟用附加操作以及代表所有這些之間的連接的線條。 所有這些都基於在我工作的 Restful 中間件和這個 Angular 前端之間來回傳遞的 JSON 對象。

當然，我什至無法讓基礎工作 - 所以就是這樣。

我目前有以下代碼：

 import {Component} from '@angular/core'; import {CdkDragExit} from '@angular/cdk/drag-drop'; @Component({ selector: 'app-device-component', templateUrl: './device-component.component.html', styleUrls: ['./device-component.component.css'] }) export class DeviceComponentComponent { exited(event: CdkDragExit<string[]>) { console.log('Exited', event.item.data); } }

以及這對於我的組件前端

 <div class="example-box" cdkDrag (cdkDragExited)="exited($event)"> <mat-card class="example-card"> <mat-card-header> </mat-card-header> <img mat-card-image src="https://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Desktop-Windows-icon.png" alt="Windows 10"> <mat-card-content> Windows 10 Machine <br /> Location 192.168.1.1 </mat-card-content> <mat-card-actions> </mat-card-actions> </mat-card> </div>

主要的 app.module.ts：

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatNativeDateModule} from '@angular/material/core'; import {HttpClientModule} from '@angular/common/http'; import {AppComponent} from "./app.component"; import {DeviceComponentComponent} from "./device-component/device-component.component"; import {MatCardModule} from "@angular/material/card"; import { DragDropModule } from '@angular/cdk/drag-drop'; import {MatDialogModule} from "@angular/material/dialog"; /* the AppModule class with the @NgModule decorator */ @NgModule({ declarations: [ AppComponent, DeviceComponentComponent ], imports: [ BrowserAnimationsModule, BrowserAnimationsModule, BrowserModule, FormsModule, HttpClientModule, MatNativeDateModule, ReactiveFormsModule, MatCardModule, MatDialogModule, DragDropModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

還有我瘋狂的高級主應用程序

 <div class="content" role="main"> <app-device-component></app-device-component> </div>

當我在終端窗口中使用 npm run start 啟動這個組件時，我可以整天拖動卡片，但我從來沒有得到控制台輸出。

有人可以幫我嗎？

Answer 1

正如您在官方文檔中所見，您需要容器（使用 CdkDropList 指令）才能觸發 cdkDragExited 事件偵聽器。 對於您的情況，我建議使用 cdkDragMoved 事件偵聽器。