在 Ember.js 中，您如何扩展一个组件并在 did-insert 上触发一个动作？

Question

我们的项目目前正在使用 Ember 3.12，我们正在尝试升级到使用 Ember 3.20，但是我们在扩展 ember-power-select 组件（现在使用 Glimmer 组件）。在我们的扩展组件中，我们需要在插入组件并访问组件元素时调用一个方法，我们在 Ember 3.12 中使用 didInsertElement 做到了这一点，但我们现在需要使用 did-insert 修饰符。但是，当我们创建自己的模板文件时，它包含一个触发 did-insert 修饰符的元素，power-select 元素不会显示（因为我们的模板文件已替换它）。我宁愿不将 power-select.hbs 文件的全部内容复制到我们自己的文件中，并将其包装在包含 did-insert 修饰符的 div 中，以便我们可以访问组件元素行动。这种情况有模式吗？现在可以扩展 Like 模板，或者有另一种方法可以在插入组件时触发操作（并且仍然可以访问组件的元素）？

Answer 1

我建议不要通过从 JavaScript class 扩展 Ember Octance 中的组件。而是调用包装组件模板中的组件：

{{! app/component/wrapper-around-ember-power-select.hbs }}

<PowerSelect
  {{! passthrough all arguments you want to support }}
  @selected={{@selected}}
  @options={{@options}}
  @onChange={{@onChange}}
  
  {{! register your own modifier }}
  {{did-insert this.onEmberPowerSelectInsertIntoDom}}

  {{! set some HTML attributes }}
  class="foo"
/>

// app/component/wrapper-around-ember-power-select.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class WrapperAroundEmberPowerSelectComponent extends Component {
  @action
  onEmberPowerSelectInsertIntoDom(element) {
    // do something with the element
  }
}

以这种方式扩展组件的好处是仅使用其 public API。

在 Ember.js 中，您如何扩展一个组件并在 did-insert 上触发一个动作？

In Ember.js how do you extend a component and trigger an action on did-insert?

ember.js