问题标签 [ng-bootstrap]

按照 ng-bootstrap 官方网站上的文档，我一直在尝试在我的 Angular 2 项目中使用 ng-bootstrap。

我所做的如下：

1. npm install bootstrap@4.0.0-alpha.4
2. 导航到根 /bootstrap 目录并运行npm install以安装 package.json 中列出的本地依赖项。
3. 再次导航到根项目并运行npm install --save @ng-bootstrap/ng-bootstrap

之后，我在模块中导入如下：

但是，我仍然无法在我的项目中使用引导样式，例如 pull-left。

有关信息，我将 angular-cli v1.0.0-beta.15 与 webpack 一起使用。

我该如何解决这个问题？

嗨，我正在调查 ng-bootstrap datepicker。我查看了演示代码，并能够让它在我的应用程序中工作。

但是，如果我添加了超过 1 个 datepicker 输入标签，则只有一个在工作。下面是我创建的代码。我试图将#d 更改为#d1 和#d2（也更改toggle() 部分）并且页面吐出错误。

我还尝试用一个组件包装它，它允许我为不同的属性拥有多个 datepicker 实例。但是，它似乎没有将值传递回父组件。

new.campaign.html

datepicker-popup.component.ts

datepicker-popup.html

有人可以指出我解决问题的正确方向吗？

我正在尝试@Input与组件一起使用，但在单击打开模式时无法弄清楚如何发送变量。例如，我有以下模板：

当我点击打开模式时：

我也对关闭功能感到困惑。

我试过了：

当我尝试调用时，在 my-component-with-content (html)(click) = close("close")中出现以下错误：self.context.close 不是函数

所以我的问题是当我单击打开按钮时如何传递 var1 以及如何将close函数传递给外部组件？

编辑：我正在使用ng-bootstrap 模式

由于某种原因，ng-bootstrap datepicker 返回所选日期后 1 个月的日期。前任。2016-09-03 在输入中选择并显示，但数据实际上是 2016-08-03。

在此处输入图像描述

我查看了官方网站演示，它的行为方式相同。

有人用 ng-bootstrap datepicker 看到过类似的行为吗？如果是这样，你如何解决它？

谢谢

我的服务器端应用程序上有带有 ng-bootstrap 的 Angular2 (2.0.0)。所有模板都是使用 php 呈现的（不是角度的）。

当我从服务器端包含任何 ng-bootstrap 片段时，它不起作用。但是，如果我从内部的角度模板中包含它们，<app-root>...</app-root>那么它就可以工作。

我基本上需要在模板上的任何位置包含下拉、模式、警报...作为直接指令样式。这怎么可能？

我正在尝试将样式应用于 Angular 2 应用程序中的 ngbTooltip 组件。我将指令应用为：

但是由于 Angular 2 应用了样式范围，我不能直接.tooltip在我的组件模板中设置类的样式。

如何为这个特定组件的工具提示提供自定义样式？

编辑：

我有一个附加到我的组件的 scss 样式表。我的风格（简化）是：

但是我渲染的样式看起来像：

这让我相信工具提示样式是未封装的（而不是仅仅刺穿这个组件的子组件。

注意：我试过:host >>> .tooltip了，但没有用，所以我最终使用了/deep/.

谢谢！

我正在尝试使用 ng-bootstrap 组件实现引导进度条。该文档使用指令“type”提供了 4 种着色类型，该指令只能是 4 种之一：“success”、“info”、“warning”或“danger”。（https://ng-bootstrap.github.io/#/components/progressbar）

我确保在我的变量 sass 文件夹中自定义了所有颜色，以覆盖引导程序的默认变量。

然而，当使用主要时，该条显示为蓝色。

进度条码：

CSS 试验：

有关如何更改该颜色的任何建议？

我认为，默认的 Typeahead 行为是在更改事件上返回匹配项。

在焦点事件上返回匹配是否也很简单？也就是说，所有值都应该匹配一个空字符串？

当输入变为空字符串时，上面的代码将返回所有值，

这是我想要的结果，除了焦点。

我正在使用ng-bootstrap typeahead组件来搜索客户数据库。当用户从预先输入的结果列表中选择客户时，我导航到客户详细信息页面。我已经完成了这项工作，但我想在导航发生后清除输入字段。我尝试在selectItem事件逻辑中将模型设置为 null 或空字符串，但这不起作用：

客户搜索-typeahead.component.html

客户搜索-typeahead.component.ts

做出选择后，预先输入的输入如下所示：

解决方案

客户搜索-typeahead.component.html

客户搜索-typeahead.component.ts

当 CSS/Bootstrap 工作在 angular2 组件中呈现时，我遇到了一些问题。

当我尝试在 Index.html 文件中呈现 CSS/html 内容（对 CSS、JS 有适当的引用）时，应用程序/功能工作正常。但是，当在 angular2 组件中呈现相同的 html 内容和 CSS 类时，它就不起作用了。

根据互联网上的搜索，我已经完成了所有这些更改，但没有任何效果。我为该组件添加了封装：ViewEncapsulation.None，但 CSS 功能仍然不能与 angular 2 一起使用。

JS引用文件的顺序也按以下顺序放置

我已经复制了这个问题并检查了Github url

有人可以帮我解决这个问题吗？