ngx-bootstrap 下拉對齊在設置動態類時不起作用

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] 是導致問題的原因，如果我將它靜態地放在類定義中，它工作正常。

這是一個復制的示例 Plunker： https ://plnkr.co/edit/5OrrQx0uefrWxWBliJDL?p = preview

Answer 1

如果您查看調試器中生成的 html，您將看到ul包含您的dropdown-menu-right類和一些內聯樣式，它們覆蓋了定位（第一次打開它時）。 這些內聯樣式可能是由庫添加的。

<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; 
}

這與默認為該類定義的樣式相同，只是有一個important規則

你的plunker編輯（在index.html中使用樣式）

Answer 2

試試這個用單引號包裹整個表達式' [ngClass]="'{dropdown-menu-right: true}'"
而不是這個[ngClass]="{'dropdown-menu-right': true}"

Answer 3

是的，我認為這是某種 ngx-bootstrap 生命周期錯誤。

對我來說修復它的是以下丑陋的“模板魔術”（ 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>