google.maps.places.Autocomplete 在 JHipster 中使用模态

Question

有没有人成功地 google.maps.places.Autocomplete 在 Jhipster 4.6.1 / angular 4.2 中使用模式？

问题出在结果显示上（我验证了 google 查找 ajax 请求 returns 正确），但是 .modal 的 z-index 覆盖了 z-用于显示结果的 google css 的索引 => 什么也没有出现。

这里也提到了这个问题： how to create google autocomplete in bootstrap modal in angular 2+?

这里：Google Place Autocomplete not showing in Bootstrap modal

..我尝试添加

.pac-container {
    z-index: 1054 !important;
 }

到组件scss，但是没有效果。

我可以通过 chrome 中的控制台手动修复它，看看它是否有效。

下面的这个例子展示了一个使用 angular2 + ngxbootstrap + modal 的工作示例：
https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/

...但我无法（终生）在 google 查找完成后覆盖 .pac-container z-index。非常感谢任何让我摆脱 "house of pain" 的建议:-)

Answer 1

在 dialog.component.html 文件中添加样式元素，然后将 class 添加到输入字段，如下所示。

 <div class="form-group">
            <input  placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control pac-container"  #search  >
        </div>

Answer 2

尝试将 .pac-container 样式添加到根级别样式，例如styles.scss.

如果您查看源代码，您会注意到 .pac-container 元素被打在 html 的底部。我猜它避开了 angular 组件的模块化样式。这并不奇怪，因为一起使用 angular 和 google 地图通常需要使用 ngZone，因为 google 地图调用发生在 angular 区域之外。

无论如何，不一定是理想的解决方案，但我还没有运行更好的选择。

google.maps.places.Autocomplete 在 JHipster 中使用模态

google.maps.places.Autocomplete with a modal in JHipster

google-places

bootstrap-modal

jhipster

angular