angular - ngbDropdown 不适用于 cdkDrag Angular 11.0.3

Question

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

Answer 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()
    }
}