Question

尝试在具有自举程序的angular-app中实现下拉菜单，但下拉菜单的布局存在问题。下拉菜单在按钮的左侧打开，而不是在底部的实际下拉菜单。此外，完整的导航栏会达到新的高度。

我的HTML如下所示：

HTML

    <div class="btn-group" >
      <button
        type="button class="
        btn btn-success dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">Login
      </button>
      <div  *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

panelExpanded只是.ts文件中的布尔值。

我尝试了两个建议的解决方案，但到目前为止都无法使用：

添加class="dropdown-menu"
安装引导程序（请参阅下文）

在向angular.json添加以下导入语句后，它仍然不起作用：

"node_modules/bootstrap/dist/css/bootstrap.css",

我还安装了ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

和引导程序

npm i --save bootstrap

尽管我收到以下消息：

bootstrap@4.1.3 requires a peer of jquery@1.9.1

bootstrap@4.1.3 requires a peer of popper.js@^1.14.3

我也必须安装这两个软件包吗？

我也尝试将ng-bootstrap-script包含在angular.json中，但仍然没有成功

"scripts": [
  "node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js",
]

在此先感谢您的反馈。

Answer 1

可能的解决方案：-

添加：-for file_name in file_names: # load the image and convert it to grayscale image = cv2.imread(file_name) gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) # check to see if we should apply thresholding to preprocess the # image if args["preprocess"] == "thresh": gray = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY | cv2.THRESH_OTSU)[1] # make a check to see if median blurring should be done to remove # noise elif args["preprocess"] == "blur": gray = cv2.medianBlur(gray, 3) # write the grayscale image to disk as a temporary file so we can # apply OCR to it filename = "{}.png".format(os.getpid()) cv2.imwrite(filename, gray) # load the image as a PIL/Pillow image, apply OCR, and then delete # the temporary file text = pytesseract.image_to_string(Image.open(filename)) os.remove(filename) #print(text) with open('resume.txt', 'a+') as f: print('***:', text, file=f)

链接：-https://stackblitz.com/edit/angular-stqy1h?file=src/app/app.component.html

class="dropdown-menu"

根据Nizet的建议，您也可以使用@ ng-bootstrap。

为此：-

<div class="btn-group" >
      <button type="button" class="btn btn-success dropdown-toggle"  data-toggle="dropdown" 
      aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">
        Login
      </button>
      <div   class="dropdown-menu" *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

angular.json：-

1) npm install --save @ng-bootstrap/ng-bootstrap
2) npm i --save bootstrap

或：-

"node_modules/bootstrap/dist/bootstrap.min.css"

对于使用ng-bootstrap，使用ng-bootstrap时不需要jquery.js，tether.js或bootstrap.js。 ng-bottstrap库将用本地Angular 2+代码替换这些脚本。

请访问https://ng-bootstrap.github.io/#/home

Answer 2

问题解决了。

那是标题的 HTML 。

<nav class="navbar navbar-light bg-light mb-5 fixed-top">
      <a class="navbar-brand" href="#">Title</a>
        <div class="navbar-expand mr-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link" routerLink="/dashboard">Main Page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/about">About</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-expand ml-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Login</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="/signin">My Profile</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="/signup">Register</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

，并且在index.html中添加了这些脚本。

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 3

引导程序-4.4.1， Angular-cli：7.3.9

npm模块中的Javascript文件需要将js文件发送到客户端，因此您需要告诉流星您想要它。

最简单的方法是在您的客户端入口点中导入js捆绑包：

import 'bootstrap/dist/js/bootstrap.bundle';行插入“ polyfills.ts ”文件

带有Bootstrap 4.1.3的Angular6中的下拉菜单不起作用

3 个答案:

angular.json：-