Angular库中无法使用cdkDropConnectedTo等拖拽属性的问题

Hey there, let's get those drag-drop errors sorted out for your Angular library! The errors you're seeing (Can't bind to 'cdkDropConnectedTo' and Can't bind to 'cdkDropData') usually come from a mix of incorrect template syntax and missing library configuration steps. Here's how to fix them step by step:

1. Correct the Drag-Drop Directive Syntax in Your Template #

First, let's fix the immediate template issues—these are likely the root cause of your errors:

• You've used cdkDrop on the parent container, which isn't a valid CDK drag-drop directive. The correct directive for the drop list container is cdkDropList (you already have this, just remove the extra cdkDrop).
• You've used cdkDropData instead of the correct directive cdkDropListData for passing data to the drop list.

Here's the corrected template code:

<div cdkDropList [cdkDropConnectedTo]="otherProgramItems" [cdkDropListData]="progItem.items" (cdkDropListDropped)="droppedMenu($event)">
 <div class="progressLabel">{{progItem.name}}</div>
 <input class="taskName" [(ngModel)]="name" type="text" (keyup.enter)="creatingTask(progItem.name)"/>
 <div class="tasks" cdkDrag *ngFor="let tasks of progItem.items; let i = index">
 <span class="task-pointer" (click)="editMode=true;currentOpenIndex=i" *ngIf="!editMode || (editMode && currentOpenIndex !== i)">{{tasks.name}}</span>
 <input *ngIf="editMode && currentOpenIndex===i" (blur)="editMode=false;currentOpenIndex=null;saveChange();" (keyup.enter)="editMode=false;currentOpenIndex=null;saveChange();" type="text" [(ngModel)]="tasks.name"/>
 <mat-icon class="delete" (click)="deleteFromArray(progItem.items,i)" >delete</mat-icon></div>
</div>

2. Ensure Your Library Module Exports Required Dependencies #

Even though you've imported DragDropModule in your library's module, you need to export it too if your library's components are used outside the library. This lets consuming applications access the CDK drag-drop directives. Update your library's module:

import { NgModule } from '@angular/core';
import { TileComponent } from './tile/tile.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
 declarations: [TileComponent],
 imports: [ DragDropModule ],
 exports: [TileComponent, DragDropModule] // Add DragDropModule to exports
})
export class SomeLibModule { } // Make sure your module class is exported

3. Verify Public API Exports #

Angular libraries use public-api.ts to expose components and modules to external consumers. Ensure you've exported your library module and component here:

// public-api.ts
export * from './lib/some-lib.module';
export * from './lib/tile/tile.component';

4. Rebuild Your Library #

After making these changes, rebuild your library to ensure the updates are reflected in the distributed code:

ng build some-lib

If your consuming application is in the same monorepo, you may need to reinstall dependencies to pick up the updated library:

npm install

5. Check Version Compatibility #

Make sure your @angular/cdk version matches your core @angular/core version. Mismatched versions can cause unexpected directive issues. Check your package.json to confirm they're on the same major version (e.g., both 16.x or 17.x). If not, update the CDK:

npm install @angular/cdk@<your-angular-core-version>

These steps should resolve the binding errors and get your drag-drop functionality working in your custom library!

内容的提问来源于stack exchange，提问作者Srinivasan Natarajan