问题标签 [ngx-bootstrap-modal]

我有ngx-bootstrap模态组件。此模式在shared文件夹内使用。FirstModalComponent我喜欢使用它DashboardModule：

如果我想制作我FirstModalComponent的 as 模块，我应该如何在 my 中实现它并在DashboardModule其中定义它entryComponents？

然后我将其导入/导出ModalsModule并SharedModule尝试将共享模块导入DashboardModule.

我现在如何在 Dashboard 中注入我FirstModalComponent的 to ？entryComponents

当我尝试导入FirstModalComponent并放入entryComponents:时出现错误Component is part of the declaration of 2 modules。

PS我不确定将其作为模块是一个好主意..

尝试从ngx-bootstrap获取事件，以便在某些情况下阻止它关闭

提供原因但不是事件的文档，我认为我需要事件来阻止它？有一个包含事件的静态模式示例，我需要使用模式服务访问事件

这就是我所指的

有事件的静态模态事件

只有原因字符串，没有事件！

我假设我不能通过停止 onHide 事件来阻止用户关闭模式？

在我的 Angular 应用程序中，我正在编写一些集成测试，其中有一个ngx-bootstrap 模式

在我的集成测试中，我正在测试一个组件，其中包含一个弹出模式的按钮。在模态框内，有一个“保存”按钮，在测试期间单击该按钮。

在模态组件内部，按钮在单击时触发一个方法： (click)=onSave()模态组件如下所示：

一切正常，除了模态不会消失。但是，该onSave()方法已正确执行。

这很奇怪，因为如果我在测试完成运行后手动单击按钮，它会正确隐藏模态

但是在测试过程中，尽管按钮正确接收到点击并触发了onSave()方法的执行，但模态并没有消失。

注意：这里没有间谍，因为它是一个集成测试，我宁愿不模拟该hide()方法，而是让它在测试期间实际工作，然后断言模态已正确消失以及其他副作用我的自定义onSave()方法。

在我的 Angular 应用程序测试套件中，我有一个测试用例执行以下操作：

一切正常，除了当这个测试真正完成执行时，模态仍然打开（whenStable回调将稍后执行，关闭模态）。这使得其他测试失败，因为模态仍然会打开一段时间。

请注意，模态不是夹具组件的一部分，因此我使用它进行了查询document.querySelector

请注意，测试用例被包装到async.

问题是我必须等待模式内的异步操作，这迫使我使用asyncand whenStable。为此，我也尝试使用fakeAsyncandtick而不是async，但这会给我错误error 1 timer(s) still in the queue。

我正在尝试将服务的特定实例传递给 ngx-bootstrap 模式内部的组件。

但是，由于模态不是启动模态的组件的子组件，因此如果我尝试注入它，它将无法解决服务依赖关系。

我可以在打开模态时将服务作为数据传递，然后作为子模态的输入，它可以工作，但这似乎不是正确的方法。

我不想在模块中提供服务 providedIn: 'root' 或提供，因为它包含在组件提供它的生命周期内的持久数据以及使用该数据的功能。

我在打开模式时考虑过传递注入器，但似乎 ngx-bootstrap 不支持该选项。我发现传递自定义注入器的唯一示例是 ng-bootstrap。

如果我无法将注入器传递给模态，则将服务作为数据传递给模态似乎没问题，但我仍然希望能够将其注入基本模态组件的子组件中。

Stackblitz 示例（将服务作为数据传递，然后作为输入传递）：

https://stackblitz.com/edit/ngx-modal-25zz6k?file=src/app/app.component.ts

主要成分：

模态组件：

SomeComponent 的子级：

理想情况下，我希望它以与 ng-bootstrap 类似的方式工作，我可以将自定义注入器传递给类似于：

能够将 AppService 添加到 SomeComponent 的注入器也可以，但从我尝试注入它的唯一方法来看，它是在构建组件时执行它，并且在运行 ngOnInit 之前未定义 AppService在某些组件中。

我觉得这样的东西在 SomeComponent 中也可以：

但是注入 Observable 而不是实际的服务似乎与将其作为输入传递差不多。

我在我的角度项目中使用https://valor-software.com/ngx-bootstrap/#/timepicker 。

在我请求服务器之前，我有一项任务将那个时间隐蔽到 UTC。

当我从时间选择器值中选择时间时，如下所示。

现在，我创建了一个函数来使用 moment.js 将其转换为 UTC

预期输出：它应该将我的时间转换为“9:51:00”

电流输出：“10:54:00”

请帮助我并指导我如何获得正确的价值。

评论 ：

(2) 根据Hoài Nam的评论，我已经更新了我的代码，如下所示，我仍然得到 10:54:00

请在下面找到两张图片

过去在使用模式时，我遇到过一种模式，它返回一个 ModalRef 对象，该对象上有一个承诺，当模式关闭或解除时，该对象被解决或拒绝。

查看 Ngx-Bootstrap 中 BsModalRef 的文档，似乎没有任何方法可以跟踪该模态引用是否已关闭或关闭。

相反，他们似乎建议订阅onHidden()BsModalService 上的事件。不幸的是，这对我不起作用，因为它会在隐藏任何模式时触发事件。我只想对隐藏的特定模态实例做出反应。

我有什么办法可以做到这一点吗？

我考虑过使用 Rxjs 的take()操作符仅在订阅onHiddenObservable 后触发第一个事件，但这感觉有点 hacky。

背景信息： 之前在这个 github 问题UpgradeComponent中提出了一个相当常见的问题，即在动态加载的入口组件中使用 s 时出现注入器错误。我觉得我对此理解得很好，并且能够通过使用与此答案类似的解决方案来正确注入范围：

我绝对想知道这个解决方案是否存在我不知道的陷阱，而不是github 问题中提到的注入器解决方案。

但是，这不是我主要关心的问题。我主要担心的是，即使使用正确的Injectorand Scope，UpgradeComponent仍然存在组件上的初始值没有被 angularjs 检测到的问题，因为$digest在创建组件后没有发生任何事情。这可能是组件加载器的具体问题ngx-bootstrap，而不是 angular 的一般问题，但我目前不确定。我现在想出的解决方法是Scope.$evalAsync()在构造函数的末尾调用UpgradeComponent，但我不确定这是否是正确的方法，这就是我问这个问题的原因。

这是我修复的逻辑示例：

我有点基于这个角度代码。

TL; DR： 这也是这个问题的简单重现，包括我的修复。

我花了几天时间尝试修改 src attr，但没有成功。任何帮助将不胜感激。这是 HTML

按钮中的 ngFor 工作正常。Angular 也可以在模态中工作，因为它在 DOM 中创建了多个模态。“澄清”按钮中的 open() 函数也有效，但嵌入中的 src 属性无效。我尝试过使用常规引导程序、ng-bootstrap 和 ngx-bootstrap，结果都相同。有任何想法吗？

谢谢你。

我正在尝试在模式内的表格上创建搜索，但是当模式打开时，我什至无法单击搜索输入字段。

我正在尝试做的是列出医院清单。在该医院列表中，用户可以单击“详细信息”视图。然后，该详细视图将显示一个包含附加信息的对话框，并显示部门列表。有些医院有 40 多个科室，因此我想在其中添加一个搜索框，以帮助用户缩小查看范围。以下显示了我目前拥有的。如果您需要更多，请告诉我，我可以提供您需要的任何东西。

设施-modal.component.html

设施-modal.component.ts

这就是我所说的模态

设施.component.ts

任何帮助都会很棒。

谢谢！