如何从外部打开和关闭Ember电源选择

Question

我知道this question，但还没有完成。我想打开和关闭从外面下拉。

我可以在单击包装器组件时分派一个mousedown事件，这样ember-power-select触发器就会打开！但是如果我再点击它，它就不会关闭。更准确地说，它关闭并再次迅速打开。

我的假设是组件侦听blur事件以关闭，然后mousedown再次到达并打开触发器。

有人想办法让这件事成功吗？还是另一种选择？我很迷茫

谢谢你的帮助！

wrapper-component.js 

  didInsertElement() {

    this._super(...arguments);
    this.element.addEventListener('mousedown', (event) => {
      event.stopPropagation();
      const eventedElement = this.element.querySelector('.ember-power-select-trigger');
      const mouseDownEvent = new MouseEvent('mousedown');
      eventedElement.dispatchEvent(mouseDownEvent);
    });

  },

Answer 1

根据文档，与触发器/组件交互的唯一方法是通过成员功率选择组件的子组件、块和操作中提供的只读API。

由于您已经可以打开触发器，所以可以将API缓存在组件(或路由控制器)中定义的onchange事件操作中，您可以在其中呈现余烬-power-select：

在其中呈现组件，只需向onopen提供一个操作

{{#ember-power-select
  options=options
  selected=selectedOption
  onchange=(action "someAction")
  onopen=(action "cacheAPI")
  as |option|}}
  {{option}}
{{/ember-power-select}}

在呈现该组件或控制器的组件或控制器中：

actions: {

  cacheAPI(options) {
    if (this.powerSelectAPI) return;

    this.set('powerSelectAPI', options);

    // if you just want the actions:
    // this.set('powerSelectAPI', options.actions);
  }

}

然后可以通过API打开/关闭触发器：

this.get('powerSelectAPI').actions.close();

Answer 2

RegisterAPI是解决方案。从医生那里：

当组件被实例化时，以及当组件内部的任何状态发生变化，并接收到一个publicAPI对象时将调用的函数，用户可以使用该对象中的操作从外部控制select。

@action
registerAPI(emberPowerSelect) {
  if (!this.emberPowerSelect) {
    this.emberPowerSelect = emberPowerSelect;
  }
}
    
@action
toggle(state) {
  if (state) {
    this.emberPowerSelect.actions.open();
  } else {
    this.emberPowerSelect.actions.close();
  }
}