angular - cdkDrag 有时会抓取 uderlying 链接元素

Question

我将 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>

关于问题的图片：

标签： angulardrag-and-dropdraggableangular-cdkangular-cdk-drag-drop