我将 cdkList 作为父组件,它有一个子组件,其中元素被包装在标签中。我的问题是,有时当我拖动元素时,会抓取底层链接,而不是拖动/抓取子元素/组件(下图)。当我将标签更改为 div 或问题消失时。因为这些应该充当链接,所以我不能这样做。我也尝试过使用 cdkDragHandle 并且问题更加频繁。
这是父母:
<div (cdkDropListDropped)="favouritesService.drop($event, favourites)" cdkDropList cdkDropListOrientation="vertical">
<app-favourites
*ngFor="let favourite of favourites"
[favouriteName]="favourite.mainFolderName || setFavouriteName(favourite)"
[favourite]="favourite"
[stackB64Image]="dataService.getB64Image(stacksService.findStack(favourite.stackId || '')?.thumb_b64)"
[stackThumbImage]="
favourite.stackId
? stacksService.findStack(favourite.stackId).processedThumbPathGcs ||
stacksService.findStack(favourite.stackId).thumbImagePathGcs
: undefined
"
[thumbnailImage]="dataService.setFavouriteThumbnail(favourite)"
></app-favourites>
</div>
这是孩子:
<a
(click)="handleClick()"
[queryParams]="{
integrationId: favourite['integrationId'],
integrationName: favourite['integrationName'],
conversationId: favourite['conversationId'],
conversationName: favourite['conversationName'],
folderId: favourite['folderId'],
folderName: favourite['folderName'],
stackId: favourite['stackId'],
stackName: favourite['stackName'],
favCatFilter: favourite['favoriteCategoryFilter']
}"
[routerLinkActiveOptions]="{ exact: true }"
[routerLink]="dataService.getRouterLink(favourite)"
cdkDrag
class="flex items-center outline-none text-text font-Montserrat-Medium text-sm w-66 h-10 cursor-pointer rounded hover:bg-white-10 focus:outline-none"
routerLinkActive="rounded bg-black-30"
>
<img
[src]="stackB64Image || (stackThumbImage ? (stackThumbImage | getDownloadURL) : thumbnailImage)"
[style.border-radius]="favourite['stackId'] ? '3px' : ''"
alt="{{
favourite['integrationSource'] ||
favourite['itemType'] ||
favouriteName ||
favourite['favoriteCategoryFilter']
? favourite['favoriteCategoryFilter']
: '' + ' logo'
}}"
style="margin-left: 15px; margin-right: 9px; width: 26px; height: auto; max-height: 26px; object-fit: cover"
/>
<p class="cursor-pointer font-Montserrat-Medium text-left text-sm truncate" style="width: 206px">
{{ favouriteName }}
</p>
</a>
关于问题的图片: