问题标签 [ngx-bootstrap-modal]

我有一个非常大的混合 Angular 应用程序；原始应用程序是 angularjs 1.6.8，其余的是 Angular 7.2.15。我们正在努力将整个应用程序转换为 Angular，但进展缓慢。我们的应用程序还依赖于 angular-ui-bootstrap (2.5.0) / ngx-bootstrap (3.1.3)。

我们的每个重要视图都是延迟加载的，但登录页面除外。我目前正在尝试转换其中一种观点。

我们的 App 模块导入ModalModule.forRoot(). 在我尝试在降级服务中访问它之前，这很有效。例如，我有一个名为“Account”的路由，其中​​包含一个服务名称AccountModalService，并创建了这个降级：

现在从我的 angularjsAccountPage我应该能够像这样打开一个模式

我知道当openTestModal从 Angular 组件调用该方法时模态有效，但是当我尝试从 angularjs 组件启动它时。我得到错误

如果我更改AccountModalService为存在于根注入器上，像这样@Injectable({ provideIn: 'root' })，我会收到一个错误，表明注入器找不到模态要显示的组件：

这TestModalComponent是一个entryComponent延迟加载AccountModule的模块，该模块导入我急切加载的公共模块。但果然，不是TestModalComponent一个entryComponent。AppModule

如果我将我的测试模态组件和此服务移动到预先加载的代码中，它将正确打开模态。然而，这只是使预先加载的模块成为整体的第一步。这不是我想继续的模式，因为它使延迟加载的路由变得毫无价值。

有没有办法降级使用 ngx-bootstrap 模式的角度服务，以BsModalService在延迟加载的路线中显示来自 angularjs 代码的模式？有没有人成功做过类似的事情，愿意分享如何？

我正在使用 Angular 9 和 ngx-bootstrap 5.6.1

在我的角度 ts 文件中，我引用了本地 css 文件。

在该文件中，我的 .modal-content 类中有一些 css，我想用它来覆盖 ngx-bootstap 提供的默认 modal-content 类。像宽度和高度这样的东西。

当我这样做时，它会被忽略。我可以通过 Chrome 看到样式表已加载。所以我尝试添加我!important的每个值，但仍然没有奏效。然后我将 css 移出并将其放在 html 组件中，但仍然无法正常工作。

官方文档显示了一个针对模板的自定义类：

因此，在我的 ts 文件中，我添加, Object.assign({}, {class: 'modal-content'})了对 show 的调用，但它仍然无法正常工作。然后我重命名了班级，仍然没有喜悦。如果我将 modal-content 类添加到全局 styles.css 文件中，然后执行以下操作：

模板正确显示。麻烦的是，样式需要是本地的，因为其他模态模板需要根据内容等具有不同的样式。那么，我如何在本地覆盖 .modal-content 。

我需要创建一种叠加层来显示在我的 web 应用程序的移动版本中需要更多空间的表单。

我正在尝试为此使用ngx-bootstrap 模式，但即使在使用他们提供的方法来自定义此组件之后，我仍然无法获得我想要的结果。

这就是我为模态应用自定义类的方式：

ngx-bootstrap.component.ts

当我旋转设备（横向模式）时，问题更加明显。为了使问题更清楚，我为每个部分分配了不同的颜色。

蓝色的（应用于模态的自定义样式）可以在

样式.css

其他两种颜色，绿色和橙色分别应用于我在 modal 和 host 容器中显示的组件

modal-one.component.scss

我知道我可以在 :host 选择器中轻松地将宽度和高度设置为 100，但我想知道：

1）为什么模态（蓝色）不占据整个屏幕 2）为什么橙色部分应用 100% 的高度和宽度不起作用。只有 100vh 和 100vw 会占据整个屏幕

这是stackblitz中的一个演示

谢谢

我有模板参考模式，里面有模板驱动的表单。当我提交表单时，所有表单值都会打印在 url

下面是我的按钮打开模式的 html 代码：

下面是我的模态html代码：

以下是我的 ts 代码：

提交页面刷新后，我没有按预期在控制台日志上得到任何内容，并且所有表单值都打印在 url 上。

我正在尝试使用ngx bootstrap的模态创建一个进度条对话框。我目前有以下内容：

在DialogsService：

问题是只有在list.forEach循环完成时才会显示对话框。如何在执行列表之前显示对话框？有没有人有类似的问题和一些工作代码？

我想以大格式显示一个居中的 ngx-bootstrap 模态。

为此有两个类：modal-dialog-centered但是modal-lg我看不到任何方法可以同时应用这些类。

在这里查看ngx-bootstrap 源代码时：modal-options.class.ts

有一个可选class property定义为class?: string;. 但它没有定义为我们可以应用的类数组。

所以现在我可以使用以下方式显示居中的模态：

或大模态但不居中：

我尝试将其添加到模态的开始模板中：

但也没有运气，班级modal-lg不想工作

任何人都知道如何让它工作？

更新

这个 CSS 看起来会给出一些结果，但表现得并不完全好：

我正在尝试为使用 BsModalService 创建的模态定义新宽度。我不能通过给他一个自定义课程来改变它。只能使用给定的类，例如“modal-xl”。为什么？我应该在哪个文件中设置类样式？

}

我有一个使用 Valor Software 的 ngx-bootstrap (5.3.2) 模式的混合 Angular 应用程序（Angular 8.2.14 和 angularjs 1.8.0）。我仍然有几个组件是 angularjs 并且足够复杂，我不能只是快速升级它们。

我已正确引导我的应用程序，以便通常升级和降级的组件按预期工作。有一种情况不会发生这种情况，我认为这是因为 ngx-bootstrap 的 BsModalService 创建组件的方式。

给定一个具有如下定义的 Angular 组件 TestModal：

还有一个像这样的angularjs组件：

模态显示的代码类似于：

如果我将我的 ng1Component 直接放入 DOM 而不是模态框内，则该组件将按照您的预期呈现。但是，如果在模态中使用 ng1Component 我会收到此错误：

显然，模态代码没有被插入到 DOM 中正确引导的 ng1Injector 可以提供范围的地方。

有没有其他人克服了这个问题？如果是这样，你是怎么做的？

我正在使用 Angular 应用程序为移动设备创建仪表板页面为此我编写了以下内容以实现从纵向到横向的强制定向我使用了引导模式

.component.html

.component.css

我在小型设备中使用了从纵向模式到横向模式的强制定向模式。

输出仅显示模态内视频的一半（即北、东），而其他部分正在模态外移动。

但我只想用模态显示所有部分。

我是新手，谁能帮我解决这个问题

我有 2 个 ng-Template，第一个模态正在打开另一个模态。当我隐藏顶部模式时，它也隐藏了下面的模式，只留下黑色背景并且应用程序无法使用，我必须手动刷新浏览器。在我们升级到 Angular 7 到 10 之前，这一切正常。

从 'ngx-bootstrap/modal' 导入 { BsModalService , BsModalRef} ；