时间戳

首页 > 解决方案 > 如何在下拉单击时动态地将“反向”类添加到下拉菜单？

javascript - 如何在下拉单击时动态地将“反向”类添加到下拉菜单？

问题描述

我正在寻找一种解决方案来reverse从 ts 文件中添加类，以便在它接近或位于底部位置时向上显示下拉菜单。

在下拉单击时，它在控制台中给了我null for 。dropdown-menu现在我通过 html 添加它，此外它需要一个布尔变量来检查它的位置。所以，我在我的项目中使用了很多下拉菜单，我不想在每个地方都添加这样的冗余方法。此外，在其解决方案之后，我必须制定一个指令以在我的项目中全局使用。

下面是我的代码：

app.component.ts

upwardFlag = false
  dropdownStatus() {
this.showDropDown = !this.showDropDown;

var scrollTop = document.documentElement.scrollTop;

var dropdown = document.querySelector('.dropdown-toggle')

var bodyRect = document.body.getBoundingClientRect().top,
  offset = dropdown.getBoundingClientRect().top,
  topOffset = offset - bodyRect;
var relativeOffset = topOffset - scrollTop;
var windowHeight = window.innerHeight;

var dropdownMenu = document.querySelector('.dropdown-menu')
if (relativeOffset > (windowHeight/2)) {
  console.log('show upward', dropdownMenu);
  this.upwardFlag = true
} else {
  this.upwardFlag = false
  console.log('show downward', dropdownMenu);
}

}

app.component.html

<div id="container">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" #dp (click)="dropdownStatus()">
  Cool dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu open" role="menu" aria-labelledby="dropdownMenu1" *ngIf="showDropDown"  [ngClass]="{'showDropDown': 'open'}" [class.reverse]="upwardFlag===true">
  <li role="presentation"><a href="#">Action</a></li>
  <li role="presentation"><a href="#">Another action</a></li>
  <li role="presentation"><a href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a href="#">Separated link</a></li>
</ul>
</div>
</div>

你可以在这个 stackblitz中检查它

标签： javascriptangulardrop-down-menupositiondropdown

解决方案

Angular 在您查询时尚未创建 HTML 元素，您的代码比 Angular 模板检查要快；）

两种解决方案

  1. 制作一个反向变量并[class.reverse]="reverse"在您的组件上执行。

  2. 使用[hidden]="!showDropdown"而不是 *ngIf，那么它将在 DOM 中可用。

  • 顺便说一句，您可以使用 a@ViewChild('.myClass') dropdown : ElementRef;以更“有角度的方式”访问元素。

推荐阅读