ngbDropdown 不适用于 cdkDrag Angular 11.0.3

如何解决ngbDropdown 不适用于 cdkDrag Angular 11.0.3

ngbDropdown 单击菜单项时未关闭。它的工作很好的外侧 cdkdrag div 但不在 cdkdrag 里面。我尝试删除 cdkDrag 然后它工作正常。我还尝试更改 ngbDropdown 和 cdkDrag 的版本。 使用手动安装 bootstrap 和 jQuery 时它也能正常工作。

解决方法

我在打开下拉菜单的按钮上添加了一个 ID。此外，我创建了一个侦听器，用于跟踪除该按钮之外的任何内容的点击事件。

<div *ngIf="actions?.length">
    <div ngbDropdown class="d-inline-block" [placement]="placement">
        <a id="drBtn" class="font-weight-boldest text-muted text-hover-primary pl-3 pb-3" ngbDropdownToggle>
            . . .</a>
        <div ngbDropdownMenu aria-labelledby="">
            <div *ngFor="let action of actions">
                <button class="dropdown-item"
                        (click)="doAction(action.type)"
                >
                    <span class="navi-icon mr-2" *ngIf="action.icon"><i class="{{action.icon}}"></i></span>
                    {{action.name}}
                </button>

            </div>
        </div>
    </div>
</div>

export class ActionDropdownComponent {
      @Input('placement') placement: string = "";
      @Input('actions') actions: IAction[];
      @Output() onAction: EventEmitter<IAction> = new EventEmitter<IAction>();
      @ViewChild(NgbDropdown) dropdown: NgbDropdown;

      public doAction(action: IAction) {
         this.onAction.emit(action);
     }

     @HostListener('document:click',['$event']) onClick(e) {
        if (e.target.id === 'drBtn') return;
        else
            if (this.dropdown.isOpen())
                this.dropdown.close()
    }
}