ng-bootstrap dropup 和 dropdown 放置在同一页面

Question

在 ng-bootstrap 中是否有任何选项可以在同一页面上进行下拉和下拉？

我已经尝试了 ng-bootstrap 的 documentation 中给出的以下代码。但它是下拉菜单的全局配置。 我想要下拉菜单和下拉菜单在同一页面上。我正在使用 Angular 8.

import {Component} from '@angular/core';
import {NgbDropdownConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-dropdown-config',
  templateUrl: './dropdown-config.html',
  providers: [NgbDropdownConfig] // add NgbDropdownConfig to the component providers
})
export class NgbdDropdownConfig {
  constructor(config: NgbDropdownConfig) {
    // customize default values of dropdowns used by this component tree
    config.placement = 'top-left';
    config.autoClose = false;
  }
}

<div ngbDropdown>
    <button class="btn btn-secondary" type="button" id="dropDownMenuButton" ngbDropdownToggle>
      Dropup Menu
    </button>
    <div class="dropdown-menu tx-13" ngbDropdownMenu aria-labelledby="dropDownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

  <div class="dropup" ngbDropdown>
    <button class="btn btn-secondary" type="button" id="dropupMenuButton" ngbDropdownToggle>
      Dropup Menu
    </button>
    <div class="dropdown-menu tx-13" ngbDropdownMenu aria-labelledby="dropupMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

Answer 1

看看API。您也可以直接将展示位置设置为 NgbDropdown 指令，例如

<div class="dropup" ngbDropdown placement="top-left">
...
</div>

这里有一个nice guide的NgBootstrap定位，你可以找到更多的例子。

ng-bootstrap dropup 和 dropdown 放置在同一页面

ng-bootstrap dropup and dropdown placement in the same page

javascript

typescript

ng-bootstrap

angular