如何让ng-multiselect-dropdown始终保持展开状态？

要实现组件始终展开，需要结合组件实例方法和事件监听覆盖默认收起行为，以下是具体修改方案：

1. 修改HTML模板，添加组件引用 #

给ng-multiselect-dropdown添加模板引用变量，方便在TS中获取组件实例：

<ng-multiselect-dropdown
  #multiSelectDropdown
  [placeholder]="'custom placeholder'"
  [settings]="dropdownSettings"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)"
  (onClose)="handleDropdownClose()"
>
</ng-multiselect-dropdown>

2. 更新TS代码，控制展开状态 #

• 引入ViewChild和NgMultiselectDropdownComponent
• 在settings中添加defaultOpen: true
• 获取组件实例，在初始化和选择事件中强制保持展开：

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { IDropdownSettings, NgMultiselectDropdownComponent } from 'ng-multiselect-dropdown';

export class AppComponent implements OnInit, AfterViewInit {
  dropdownList = [];
  selectedItems = [];
  dropdownSettings: IDropdownSettings = {};
  
  // 获取下拉组件实例
  @ViewChild('multiSelectDropdown') multiSelectDropdown!: NgMultiselectDropdownComponent;

  ngOnInit() {
    this.dropdownList = [
      { item_id: 1, item_text: 'Mumbai' },
      { item_id: 2, item_text: 'Bangaluru' },
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' },
      { item_id: 5, item_text: 'New Delhi' }
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' }
    ];
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: true,
      defaultOpen: true // 开启默认展开
    };
  }

  ngAfterViewInit() {
    // 初始化后强制展开，避免defaultOpen失效
    this.multiSelectDropdown.openDropdown();
  }

  onItemSelect(item: any) {
    console.log(item);
    // 选择后重新展开下拉框
    this.multiSelectDropdown.openDropdown();
  }

  onSelectAll(items: any) {
    console.log(items);
    // 全选后重新展开下拉框
    this.multiSelectDropdown.openDropdown();
  }

  handleDropdownClose() {
    // 监听关闭事件，强制重新展开
    setTimeout(() => {
      this.multiSelectDropdown.openDropdown();
    }, 0);
  }
}

关键修改说明 #

• 模板引用变量：通过#multiSelectDropdown获取组件实例，调用内置的openDropdown()方法控制展开
• defaultOpen设置：开启默认展开，但组件可能因初始化逻辑自动收起，所以在ngAfterViewInit中再次调用展开方法
• 选择事件处理：默认选择选项后组件会自动收起，因此在onSelect和onSelectAll中重新调用展开方法
• 关闭事件监听：通过onClose事件拦截关闭行为，延迟调用展开方法（用setTimeout避免变更检测问题）

如果不需要允许用户手动关闭，还可以通过CSS隐藏下拉框的关闭触发区域，但上述方法更灵活可控。

内容的提问来源于stack exchange，提问作者rifa