单击外部后，ngx-color-picker 对话框关闭答案

【问题标题】：ngx-color-picker dialog box closes after clicking outside单击外部后，ngx-color-picker 对话框关闭
【发布时间】：2020-02-19 22:29:06
【问题描述】：

我在我们的项目中使用了 ngx-color-picker。但我遇到的问题是，每当我在对话框外单击时，它都会关闭。如果在对话框之外单击它，我不想关闭对话框。 ngx-color-picker 中是否有任何内置事件可以解决这种情况？

我使用了这个包： https://www.npmjs.com/package/ngx-color-picker

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angular

【解决方案1】：

据此function from the source

 public onMouseDown(event: MouseEvent): void {
    if (!this.isIE10 && this.cpDialogDisplay === 'popup' &&
        event.target !== this.directiveElementRef.nativeElement &&
        !this.isDescendant(this.elRef.nativeElement, event.target) &&
        !this.isDescendant(this.directiveElementRef.nativeElement, event.target) &&
        this.cpIgnoredElements.filter((item: any) => item === event.target).length === 0)
    {
      if (!this.cpSaveClickOutside) {
        this.setColorFromString(this.initialColor, false);

        this.directiveInstance.colorChanged(this.initialColor);
      }

      this.closeColorPicker();
    }
  }

你必须使用：

cpDialogDisplay = 'inline'

代替

cpDialogDisplay = 'popup'

为了防止这种行为，这将禁用对话框。

所以，你的问题的答案：

如果在对话框之外单击，我不想关闭对话框对话。 ngx-color-picker 中是否有任何内置事件需要照顾这种情况？

是否。

在我看来，与任何开源项目一样，您有几个选择：

1) 更改组件的源代码，将您的更改提交到 github 中的项目，如果维护人员同意您的实现，您的新功能将成为该组件未来版本的一部分；

2) 您从头开始构建自己的组件，可能很大程度上基于当前的ngx-color-picker，具有您想要的功能，也许还有其他功能。

3) 寻找可能具有您正在寻找的功能/行为的其他类似项目/组件。

【讨论】：

'inline' 将停止切换。如何使两者都工作。
@loneWolf 虽然可能不是你想要的答案，但我已经更新了。

【解决方案2】：

来自docs，没有这样的输入... 也许你可以看看inline定位而不是popup。

[cpDialogDisplay]            // Dialog positioning mode: 'popup', 'inline' ('popup').
                             //   popup: dialog is shown as popup (fixed positioning).
                             //   inline: dialog is shown permanently (static positioning).

如果你真的需要这个功能，你仍然可以 fork 项目。

【讨论】：

【解决方案3】：

cpCloseClickOutside 不做这项工作吗？

[cpCloseClickOutside]        // Close the color picker dialog when user clicks outside (true).

【讨论】：