angular - 尝试移植 ng-bootstrap 示例，但 ngbDropdownToggle 工作正常

Question

我是 Angular 和 Bootstrap 的新手，所以如果这个问题有点基础且范围有点广，请提前致歉。

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

我尝试了两种方法:

1. 我创建了一个项目，然后将 Stackblitz 集合中的相关 src/app 文件复制到项目的 src/app 文件夹中(即 app.component.html，app.component.ts, app.module.ts, dropdown-form.html, dropdown-form.ts) .在这种方法下，呈现了 HTML 但下拉列表没有切换。

2. 作为第二次尝试，我尝试将整个 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 文件并使下拉切换起作用，则在此先表示感谢。 . .

Answer 1

要使其在 stackblitz 上运行，您需要添加依赖项 @ng-bootstrap/ng-bootstrap (查看下面的屏幕截图)

要使其在您的 PC 上运行，您需要 npm install --save @ng-bootstrap/ng-bootstrap

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

working demo