Ember组件如何传递动作至路由/控制器触发删除操作？

我来帮你搞定这个Ember组件触发路由动作的需求～在Ember的设计逻辑里，组件本身没法直接调用路由的动作，得通过动作向上传递的方式来实现：把路由的动作通过父模板传给组件，再让组件触发它。具体步骤如下：

打开对应的路由文件（比如app/routes/holiday-hours.js），写下处理删除逻辑的动作：

import Route from '@ember/routing/route';

export default class HolidayHoursRoute extends Route {
  actions = {
    deleteHolidayHour(holidayHour) {
      // 这里写你的删除逻辑，比如调用后端API或者直接删除记录
      holidayHour.destroyRecord().then(() => {
        // 删除成功后的操作，比如刷新数据
        this.refresh();
      }).catch((error) => {
        // 处理删除失败的情况
        console.error('删除失败:', error);
      });
    }
  };
}

回到你的holiday-hours.hbs模板，给holiday-hour组件添加一个动作参数，把路由的deleteHolidayHour动作绑定进去，同时带上当前的holidayHour作为参数：

// templates/holiday-hours.hbs
{{#each model as |holidayHour|}}
  {{holiday-hour 
    holiday=holidayHour 
    shouldDisplayDeleteIcon=true
    onDelete=(action 'deleteHolidayHour' holidayHour)
  }}
{{/each}}

这里的onDelete是我们给组件约定的动作参数名，你也可以换成deleteAction这类更直观的名字，只要前后保持一致就行。

打开holiday-hour组件的模板，给删除按钮绑定这个传入的onDelete动作：

// templates/components/holiday-hour.hbs
<!-- 先展示你的条目内容，比如日期、名称等 -->
<div class="holiday-hour-item">
  {{holiday.date}} - {{holiday.name}}
</div>

{{#if shouldDisplayDeleteIcon}}
  <!-- 点击按钮就触发传入的onDelete动作 -->
  <button class="delete-btn" {{action onDelete}}>删除</button>
{{/if}}

如果你的组件有对应的JS文件（app/components/holiday-hour.js），也可以显式声明这个动作参数，让代码更清晰易维护：

import Component from '@ember/component';

export default class HolidayHourComponent extends Component {
  // 声明接收onDelete动作参数
  onDelete = null;
}

如果是用Ember Octane及以上版本的Glimmer组件，语法会稍微调整：父模板里用@onDelete={{action 'deleteHolidayHour' holidayHour}}传递动作，组件模板里用{{@onDelete}}调用，核心逻辑还是一样的——动作从路由通过模板向下传递，组件触发后回调路由的处理逻辑。

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