Ngx 引导和输入文件元素

Question

我有一个引导模式（ngx bootstrap），里面有一个文件输入控件（输入类型=文件）。

我使用从另一个组件打开模式

modalService.show(componentName);

一旦打开模式

当我从浏览按钮中选择一个文件并双击它时，模式关闭，而当我选择一个文件并单击打开按钮（而不是直接双击）时，文件被选中并且模式不会关闭。这个问题在 Firefox 中出现，但在 edge 或 chrome 中没有。

<div class="modal-body">
<input type="file" id="fileElement"/>
</div>
<div> class="modal-footer">
<button (click)="saveMethod()">Save</button>
</div>

有什么想法吗？

Answer 1

我今天在我的应用中检测到了同样的行为。这只发生在 Firefox 中，而不是边缘（哈哈）或 chrome。 双击以选择 ngx-bootstrap 模式中的文件时会发生这种情况。现在重要的是要注意它只发生在特定情况下。我会尽力解释，但英语不是我的第一语言。

假设您的网站有 3 层。第一层是您的网页。第二层是您打开的模式。第三层是您的文件选择弹出窗口。

当你双击选择一个文件时出现问题，并且你在文件选择弹出窗口（第 3 层）中单击的位置在主网页（第 1 层）上方。

如果您双击选择您的模态（第 2 层）上方的文件（第 3 层），则不会有问题。

这也只会在您未激活背景：“静态”选项时发生。此选项可防止在模态外部单击时关闭模态。 对我来说，这似乎是一个错误，无论是由 Firefox 还是由我不知道的 ngx-bootstrap 库引起的，但这很烦人。 最好的解决方案是防止双击事件传播但我无法实现它。我找到的唯一解决方案是使用背景选项，但我也不喜欢它。在 Angular 应用中，您可以在模态组件上添加 [config]="{ background: 'static' }"。