如何在Ember模板中渲染含{{action}}的HTML文本使其生效？

Ember 的 {{{}}} 语法仅会渲染纯 HTML 内容，不会解析其中的 Ember 模板语法（比如 {{action}}），所以你用计算属性返回带动作的 HTML 字符串，渲染后动作只会显示成文本，无法绑定事件。下面是可行的解决方案：

方案一：直接在模板中编写（推荐） #

如果链接的参数或文本是动态的，直接在模板中结合组件/控制器的属性来写，Ember 会正常编译并绑定动作：

{{!-- 固定参数写法 --}}
<a {{action 'runService' 15001}} href="#">Click Here</a>

{{!-- 动态参数写法，假设 serviceId 是组件/控制器的属性 --}}
<a {{action 'runService' this.serviceId}} href="#">{{this.linkText}}</a>

方案二：用组件封装动态结构 #

如果需要更灵活的动态生成逻辑，推荐用组件来封装链接和动作：

1. 创建组件 service-link，模板内容：

<a {{action 'triggerService' @serviceId}} href={{@linkHref}}>{{@linkText}}</a>

2. 组件类代码：

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ServiceLinkComponent extends Component {
  @action
  triggerService(serviceId) {
    // 调用传入的父组件动作
    this.args.onRunService?.(serviceId);
  }
}

3. 在使用的模板中调用组件：

<ServiceLink 
  @serviceId={{15001}} 
  @linkText="Click Here" 
  @linkHref="#" 
  @onRunService={{action 'runService'}} 
/>

为什么原方法无效？ #

Ember 在初始化阶段会提前编译模板中的语法（包括 {{action}}），将其转换为对应的事件绑定逻辑。而通过计算属性返回的 HTML 字符串是在渲染阶段才插入的，不会经过 Ember 的模板编译流程，所以 {{action}} 会被当作普通文本处理，无法触发动作。

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