ngbDropdown 不适用于 cdkDrag Angular 11.0.3答案

【问题标题】：ngbDropdown not working with cdkDrag Angular 11.0.3ngbDropdown 不适用于 cdkDrag Angular 11.0.3
【发布时间】：2021-01-07 21:00:24
【问题描述】：

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

【问题讨论】：

标签： angular ng-bootstrap angular-cdk-drag-drop

【解决方案1】：

我向打开下拉菜单的按钮添加了一个 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()
    }
}

【讨论】：

您需要为您的答案添加一些解释。