ngb 下拉菜单 - 滚动到活动项目答案

【问题标题】：ngb Dropdown - Scroll to Active Itemngb 下拉菜单 - 滚动到活动项目
【发布时间】：2021-09-23 05:50:19
【问题描述】：

多年来，我一直使用 ngbDropdown 作为选择器。它始终是未来 10 年和过去 10 年，而当前年份是最初选择的年份。下拉菜单本身具有最大高度并且可以滚动。

现在，当我切换下拉菜单时，所选（活动）值可能在可见选项之外。是否有一种“简单”的方法可以将此元素滚动到视图中，或者甚至更好地滚动到现在，以使所选年份位于可见选项的中间？

我已经尝试过 element.scrollIntoView，但为此我认为下拉菜单必须是可见的，但我找不到任何会在下拉菜单呈现后立即触发的事件。对于我的发现，有一个 Bootstrap Javascript 事件“shown.bs.dropdown”，这正是我所需要的，但我在 ngBootstrap 中找不到等价物。还是有更好的方法可以忽略？

【问题讨论】：

标签： javascript html css angular ng-bootstrap

【解决方案1】：

看来你可以使用 NgbDropdown 的openChange 事件

  /**
   * An event fired when the dropdown is opened or closed.
   *
   * The event payload is a `boolean`:
   * * `true` - the dropdown was opened
   * * `false` - the dropdown was closed
   */
  @Output() openChange = new EventEmitter<boolean>();

下拉菜单源代码：https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/dropdown/dropdown.ts#L213

【讨论】：