如何通过编程方式将Ember组件插入div？基于修饰符的tooltip开发

在Ember 3.8 + Ember Modifier 1.0.5环境下，要在修饰符中插入带逻辑的复杂Ember组件，核心是通过Owner手动实例化组件并挂载DOM，避开{{component}}助手的限制。以下是具体实现步骤：

核心实现逻辑 #

Ember的Owner负责管理组件实例的生命周期，修饰符可通过第三个参数（options对象）获取当前Owner实例。利用Owner的lookup和createComponent方法实例化组件，再将组件DOM挂载到目标元素，同时处理修饰符销毁时的组件清理，防止内存泄漏。

完整代码示例 #

1. 修饰符实现（tooltip.js） #

import { modifier } from 'ember-modifier';
import { isPresent } from '@ember/utils';

export default modifier(function tooltip(element, positionalArgs, { owner }) {
  // 从位置参数中获取要渲染的组件类
  const TooltipContentComponent = positionalArgs[0];
  if (!isPresent(TooltipContentComponent)) return;

  // 1. 通过Owner实例化组件，传递所需属性
  const componentInstance = owner.lookup('component-lookup:main').createComponent(
    TooltipContentComponent,
    {
      foo: positionalArgs[1],
      bar: positionalArgs[2]
    },
    owner
  );

  // 2. 渲染组件并挂载到目标元素
  componentInstance.appendTo(element);

  // 3. 修饰符销毁时清理组件实例
  return () => {
    componentInstance.destroy();
  };
});

2. 自定义复杂Tooltip内容组件 #

// app/components/tooltip-content.js
import Component from '@ember/component';

export default Component.extend({
  template: `
    <div class="tooltip-content">
      <p>自定义Tooltip内容：{{foo}} - {{bar}}</p>
      <button {{action "handleClick"}}>触发操作</button>
    </div>
  `,

  actions: {
    handleClick() {
      console.log('Tooltip内的交互逻辑触发');
    }
  }
});

3. 模板中使用修饰符 #

先实现一个component-class助手用于获取组件类：

// app/helpers/component-class.js
import Helper from '@ember/component/helper';
import { inject } from '@ember/service';

export default Helper.extend({
  owner: inject(),

  compute([componentName]) {
    return this.owner.lookup(`component:${componentName}`);
  }
});

然后在模板中调用修饰符：

{{#let (component-class "tooltip-content") as |TooltipContent|}}
  <div {{tooltip TooltipContent "参数A" "参数B"}}>
    Hello World
  </div>
{{/let}}

关键注意事项 #

• 生命周期管理：必须在修饰符的清理函数中销毁组件实例，避免内存泄漏。
• 属性传递：实例化组件时通过第二个参数传递属性，确保组件能接收外部数据。
• Owner获取：Ember Modifier 1.0.5中，修饰符第三个参数的options对象包含owner，这是实例化组件的核心依赖。

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