尝试移植 ng-bootstrap 示例，但 ngbDropdownToggle 工作答案

【问题标题】：Trying to port ng-bootstrap example, but ngbDropdownToggle working尝试移植 ng-bootstrap 示例，但 ngbDropdownToggle 工作
【发布时间】：2019-03-21 04:16:09
【问题描述】：

我是 Angular 和 Bootstrap 的新手，所以如果这个问题有点基本而且有点广泛，请提前道歉。

出于测试/学习目的，我正在尝试将 https://ng-bootstrap.github.io/#/components/dropdown/examples 中的 "Mixed menu items and form 'Toggle Dropdown'" Stackblitz 示例移植到我的新项目中，虽然我可以让 HTML 呈现，但我无法让下拉按钮切换.

我尝试了两种方法：

我创建了一个项目，然后将 Stackblitz 集合中的相关 src/app 文件复制到项目的 src/app 文件夹中（即app.component.html、app.component.ts、app.module.ts、dropdown-form.html ，dropdown-form.ts)。在这种方法下，HTML 呈现，但下拉菜单没有切换。
作为第二次尝试，我尝试将整个 Stackblitz 集合复制到其自己的文件夹中，并尝试在其上运行 ng serve。在这种方法下，什么都没有编译，并且有很多错误消息，以Could not find module "@angular-devkit/build-angular" . . .

我有一个特别的问题是ngbDropdownToggle 指令驻留在哪里？

即来自dropdown-form.html:

<button class="btn btn-outline-primary" id="dropdownForm1" ngbDropdownToggle>Toggle dropdown</button>

在 Stackblitz 上，我注意到 package.json 中有 "@ng-bootstrap/ng-bootstrap" 的依赖项，并想知道 ngbDropdownToggle 指令是否驻留在那里，但是当我尝试将该依赖项添加到我原始项目的 package.json 文件中时，编译器抱怨：Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap'。我的工作假设是我的原始项目缺少一些关键的ng-bootstrap 导入/功能，但我不确定这是否正确，如果是，我该如何添加必要的导入/功能？

如果有人对我如何移植 Stackblitz 文件并使下拉切换工作有任何想法，请提前非常感谢。 . .

【问题讨论】：

添加依赖后，你运行npm install了吗？这应该可以解决您的 devkit 和 ng-bootstrap 错误。

标签： angular dropdown ng-bootstrap

【解决方案1】：

要让它在 stackblitz 上运行，您需要添加一个依赖项 @ng-bootstrap/ng-bootstrap（查看下面的屏幕截图）

要让它在你的电脑上运行，你可以npm install --save @ng-bootstrap/ng-bootstrap

另外，您需要在 index.html 中添加 boostrap css <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

working demo

【讨论】：

非常感谢@Akber Iqbal 和@KiraAG。我执行了npm install --save @ng-bootstrap/ng-bootstrap 并在index.html 中添加了.css 链接，（我什至手动将"@ng-bootstrap/ng-bootstrap":"4.1.0" 添加到package.json 然后运行ng serve 但结果仍然相同。HTML 呈现，但下拉菜单没有'不切换。还有什么想法吗？谢谢！
进一步说明：我可以让 Stackblitz 示例在我的计算机上正常工作，但是当我创建一个新的 Angular 项目 (ng new dropdown) 时，然后从 Stackblitz 示例中复制 app 文件，将@ng-bootstrap/ng-bootstrap 依赖添加到package.json，将.css 链接添加到index.html，运行npm install --save @ng-bootstrap/ng-bootstrap，然后ng serve 我仍然无法让下拉菜单切换。
有点尴尬地说，除了来自@Akber Iqbal 和@KiraAG 的现场cmets，我忘记在我的导入中添加import { NgbModule } from '@ng-bootstrap/ng-bootstrap，并将NgbModule 添加到@NgModule进口。所以现在它起作用了！非常感谢您的回复。