Angular 9 - js 脚本不工作（例如 foundations 或 bootstrap）

Question

Angular 的第一步（在线课程），我一直认为我的 JS 不工作。因为当我服务下面的项目时看到的是基础样式（css），但是当我点击它时汉堡包图标不是opening/closing。该代码是来自基金会网站的示例。

app.component.html 看起来像这样

<h1>This is the app</h1>

<div class="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="main-nav"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-nav">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site title</li>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Two</a></li>
    </ul>
  </div>
</div>

通过大量的话题最终得出以下结论：

在styles.css中我添加了

@import "../node_modules/foundation-sites/dist/css/foundation.min.css";

在angular.json中我添加了

 "styles": [
              "src/styles.css",
              "node_modules/foundation-sites/dist/css/foundation.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/foundation-sites/dist/js/foundation.min.js"
            ]

我自己的看法：

有汉堡图标和样式，但没有 opening/closing
我的 angular.json 文件未命名为 angular-cli.json（就像在其他示例中一样...为什么！？）
我不需要 ../ 脚本，它们只能像上面那样编译（否则会出错）
在 Unix 上工作 (ubuntu)
Jquery 版本 3.5.1 和基础站点 6.6.3

Answer 1

这可能会起作用，但是普通的 Bootstrap 使用 jQuery 来操纵 DOM（例如 open/close 您的工具栏，当您单击汉堡菜单图标）。

jQuery 确实不应该与 Angular 一起使用，因为它可能会干扰 Angular 对 DOM 的维护。（jQuery 会改变 DOM，而 Angular 不知道）。

出于这个原因，还有一些其他项目，包括 ngx-bootstrap，它们使用 Bootstrap 的 css 但根据 Angular 指令，或者看起来和操作类似于 Bootstrap 并重新实现（至少部分） css 和 js.

Angular 9 - js 脚本不工作（例如 foundations 或 bootstrap）

Angular 9 - js scripts not working (e.g. foundations or bootstrap)

html

javascript

css

zurb-foundation

angular