Question

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

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

任何帮助将不胜感激。

Answer 1

 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）寻找其他可能具有所需功能/特性的类似项目/组件。

Answer 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).

如果确实需要此功能，您仍然可以派生该项目。

Answer 3

cpCloseClickOutside不会做这项工作吗？

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

在外部单击后，“ ngx-color-picker”对话框关闭

3 个答案: