如何为Ember组件指定自定义模板路径以避免模板重复？

针对你的项目结构，以下几种方法可以让new/index.ts和rename/index.ts复用上级的index.hbs模板：

方法1：直接使用相对路径引用 #

在两个组件的index.ts里，用相对路径指向上级目录的模板文件，示例代码如下：

// new/index.ts 或 rename/index.ts
import template from '../index.hbs';

// 后续直接使用template变量完成模板渲染

如果你的构建工具（如Webpack、Vite）支持Handlebars文件解析，这种方式最直接。若出现路径解析错误，检查构建工具的resolve配置，确保允许跨目录引用静态资源。

方法2：配置别名简化路径 #

如果觉得相对路径不够直观，可在项目构建配置中为modals目录设置别名：

Webpack 配置示例（webpack.config.js） #

resolve: {
  alias: {
    '@modals': path.resolve(__dirname, './modals')
  }
}

Vite 配置示例（vite.config.js） #

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@modals': path.resolve(__dirname, './modals')
    }
  }
});

配置完成后，组件内即可用别名引用模板：

import template from '@modals/index.hbs';

方法3：在base.ts中统一引入模板 #

由于两个组件都继承自base.ts，可将模板引用逻辑放到基类中，避免重复代码：

// base.ts
import template from './index.hbs';

export class BaseModal {
  protected template = template;
  // 其他通用逻辑...
}

之后new/index.ts和rename/index.ts继承基类后，直接使用this.template即可：

// new/index.ts
import { BaseModal } from '../base.ts';

export class NewModal extends BaseModal {
  // 组件独有逻辑...
  render() {
    // 直接使用this.template完成渲染
  }
}

方法4：调整目录结构（可选） #

如果上述方法都不适用，可考虑将共享模板单独存放，优化后的目录结构如下：

modals/
├─ templates/
│  ├─ common.hbs
├─ base.ts
├─ new/
│  ├─ index.ts
├─ rename/
│  ├─ index.ts

之后两个组件只需引用../templates/common.hbs即可，这种结构更清晰，也方便后续添加更多共享模板。

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