如何为Glimmer子组件指定父类模板？

我有一个标准的Glimmer「基础」组件：

import Component from '@glimmer/component';
export default class BaseComponent extends Component { ... }

它拥有常规模板，但该组件的实际实现为子类组件，这些子类会覆盖部分模板获取器和参数，以适配不同数据类型：

export default class TypeAComponent extends BaseComponent { ... }

export default class TypeBComponent extends BaseComponent { ... }

等等。

我的问题是：如何指定所有子组件使用父类模板，从而避免为所有子组件重复编写复杂的HTML？这些组件视觉上完全一致，模板变更需同步到所有子类，因此重复模板并不理想。

在Ember Classic组件中，有layout和layoutName属性，只需在基础组件中设置：

layoutName: 'components/component-name'

所有子组件就会自动使用指定的模板。

现在迁移到Glimmer组件后，我尝试了以下方法但均无效：

• layout属性
• layoutName属性
• template属性
• 不为子组件创建模板，期望其自动回退到父类模板

目前唯一可行的方式是创建应用初始化器：

app.register('template:components/child1-component', app.lookup('template:components/base-component'));
app.register('template:components/child2-component', app.lookup('template:components/base-component'));

但这种方式过于hack，因此想咨询是否存在我遗漏的正规实现方式？

在Glimmer组件体系中，官方提供了setComponentTemplate工具函数作为替代Classic组件layout/layoutName的正规方案，可直接将父类模板绑定到子类组件上。

基础用法 #

在每个子类组件文件中，导入工具函数和基础组件的模板，显式关联模板与子类：

import setComponentTemplate from '@ember/component';
import template from '../templates/components/base-component';
import BaseComponent from './base-component';

export default class TypeAComponent extends BaseComponent {
  // 子类自定义逻辑，比如参数处理、计算属性等
}

// 将基础模板绑定到当前子类
setComponentTemplate(template, TypeAComponent);

批量优化方案 #

如果子类数量较多，可以封装一个工具函数统一处理模板绑定，减少重复代码：

// utils/use-base-template.js
import setComponentTemplate from '@ember/component';
import baseTemplate from '../templates/components/base-component';

export default function useBaseTemplate(ComponentClass) {
  setComponentTemplate(baseTemplate, ComponentClass);
  return ComponentClass;
}

在子类中调用该工具函数：

import useBaseTemplate from '../utils/use-base-template';
import BaseComponent from './base-component';

export default useBaseTemplate(class TypeAComponent extends BaseComponent {
  // 子类自定义逻辑
});

关键注意点 #

• 该方案要求Ember版本≥3.25，setComponentTemplate是此版本正式引入的API
• 这种写法完全符合Glimmer组件的设计规范，避免了初始化器的hack式操作
• 后续修改基础模板时，所有绑定该模板的子类会自动同步更新，无需逐个修改

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