ngx-bootstrap 设置动态 class 时下拉对齐不起作用

Question

我对 ngx-bootstrap（使用 bootstrap 4.1）下拉组件有一个奇怪的问题。

我正在通过变量将下拉菜单设置为右对齐，但是，当我这样做时，下拉菜单仅在第二次单击时右对齐。

这是一个复制问题的示例代码：

<div class="btn-group" dropdown placement="bottom right">
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
      This dropdown's menu is right-aligned <span class="caret"></span>
    </button>
    <ul *dropdownMenu class="dropdown-menu" [ngClass]="{'dropdown-menu-right': true}" role="menu">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

注意：我动态设置属性的 [ngClass] 是导致问题的原因，如果我将它静态地放在 class 定义中它工作正常。

这是一个复制的示例 Plunker： https://plnkr.co/edit/5OrrQx0uefrWxWBliJDL?p=preview

Answer 1

尝试用单引号将整个表达式括起来 ' [ngClass]="'{dropdown-menu-right: true}'"
而不是这个 [ngClass]="{'dropdown-menu-right': true}"

Answer 2

如果您在调试器中查看生成的 html，您会看到 ul 包含您的 dropdown-menu-right class 和一些内联样式，它们覆盖定位（第一次打开它）。这些内联样式可能是由库添加的。

<ul class="dropdown-menu show dropdown-menu-right" 
role="menu" ng-reflect-klass="dropdown-menu" 
ng-reflect-ng-class="[object Object]" 
style="left: 0px; right: auto; top: 100%; transform: translateY(0px);">

也许您应该将问题提交给库维护人员 github。作为解决方法，您可以尝试将此 css 添加到全局 CSS 文件

.dropdown-menu-right {
    right: 0 !important;
    left: auto !important; 
}

这与 class 默认定义的样式相同，只是存在 important 规则

Your plunker edited（样式在 index.html）

Answer 3

是的，我认为这是某种 ngx-bootstrap 生命周期错误。

为我解决问题的是以下丑陋的 "templating magic"（popupLeft 是我的布尔值，它决定是否应添加 dropdown-menu-right）：

  <ng-template *ngIf="popupLeft" dropdownMenu>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <ng-container *ngTemplateOutlet="dropdownMenuContents"></ng-container>
    </ul>
  </ng-template>
  <ng-template *ngIf="!popupLeft" dropdownMenu>
    <ul class="dropdown-menu" role="menu">
      <ng-container *ngTemplateOutlet="dropdownMenuContents"></ng-container>
    </ul>
  </ng-template>
  <ng-template #dropdownMenuContents>
    <li class="dropdown-item">
      <!-- ... -->
    </li>
  </ng-template>

Answer 4

要使 placement="bottom right" 起作用，您还应该添加 container="body"

这应该有效：

<div class="btn-group" dropdown container="body" placement="bottom right">
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
      This dropdown's menu is right-aligned <span class="caret"></span>
    </button>
    <ul *dropdownMenu class="dropdown-menu" [ngClass]="{'dropdown-menu-right': true}" role="menu">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

ngx-bootstrap 设置动态 class 时下拉对齐不起作用

ngx-bootstrap dropdown alignment not working when setting dynamic class

dropdown

ngx-bootstrap

angular