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

Question

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

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

我尝试了两种方法：

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

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"对Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap'. 我的工作假设是我的原始项目缺少一些关键的ng-bootstrap导入/功能，但我不确定这是否正确，如果是，我该如何添加必要的导入/功能？

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

标签： angulardropdownng-bootstrap

Answer 1

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

让它在你的电脑上工作，你做npm install --save @ng-bootstrap/ng-bootstrap

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

工作演示