Angular，如何在下拉按钮上显示下拉项目*

【问题标题】：Angular, how to show the dropdown items at dropdown button*Angular，如何在下拉按钮上显示下拉项目*
【发布时间】：2020-12-12 08:51:49
【问题描述】：

我有一个关于下拉按钮的问题。这是我从示例中复制的代码；

        <!--adjustbtn is a class that I made that gives some css to button-->
        <button class="dropdown adjustbtn" style="border-radius: 5px; box-shadow: none;">
            <a class="dropdown-toggle" data-toggle="dropdown" role="button" 
            aria-haspopup="true" aria-expanded="false" style="color:white">
                Dropdown Button
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </button>

在示例中，这工作正常，但是当我单击按钮时，没有弹出任何内容？我在这里错过了什么，我应该编写一些打字稿吗？

【问题讨论】：

标签： html angular typescript angular8

【解决方案1】：

它需要js文件来触发下拉的切换事件。

请阅读这里https://getbootstrap.com/docs/4.5/getting-started/download/#npm

在angular.json 中，从node_modules 数组中的node_modules 目录添加bootstrap.js 的相对路径（如果需要jQuery.js 和popper.js）。

{ //.....
   architect: { //....
      build: { //.....
         options: { //....
              "scripts": [
                        "node_modules/jquery/dist/jquery.js",
                        "node_modules/popper.js/dist/umd/popper.js",
                        "node_modules/bootstrap/dist/js/bootstrap.js"
                    ]
         }
      }
   }
}

【讨论】：