Angular模板字符串点击事件绑定：函数自动执行且编译后为undefined

问题根源 #

你当前的写法有两个核心问题：

1. 函数立即执行：${this.clickShowAttachments(data.attachments)}是直接调用函数，而非传递函数引用，所以在渲染HTML时就会触发执行，函数返回值（无返回值则为undefined）会被填充到(click)属性里，这就是页面元素显示undefined的原因。
2. Angular不编译动态拼接的HTML：用模板字符串手动拼接的HTML属于未编译内容，Angular无法识别其中的(click)这类框架级事件绑定语法，就算你调整引号也没用。

推荐解决方案（符合Angular规范） #

完全放弃手动拼接HTML的方式，用Angular原生的*ngIf指令实现条件渲染，这是最安全、最符合框架设计的做法：

<!-- 直接在组件模板中编写 -->
<button *ngIf="data.attachments" (click)="clickShowAttachments(data.attachments)">show attachments</button>

这种写法会让Angular正常编译事件绑定，既不会提前执行函数，也能保证点击时触发逻辑。

特殊场景下的动态HTML处理（仅当必须用动态渲染时） #

如果因为业务限制必须动态生成HTML字符串，需要改用原生JS的onclick绑定，同时处理好函数上下文和参数传递，还要注意XSS风险：

1. 组件中编写动态HTML生成逻辑：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  // 组件元数据
})
export class YourComponent {
  data: { attachments?: any[] } = {}; // 你的数据

  constructor(private sanitizer: DomSanitizer) {}

  getAttachmentButtonHtml(): SafeHtml {
    if (!this.data.attachments) return '';

    // 将组件方法转为字符串，用箭头函数确保上下文指向组件实例，同时序列化参数
    const funcBody = this.clickShowAttachments.toString();
    const serializedAttachments = JSON.stringify(this.data.attachments);
    const onclickHandler = `(() => { ${funcBody} return clickShowAttachments; })()(${serializedAttachments})`;
    
    const html = `<button onclick="${onclickHandler}">show attachments</button>`;
    // 标记HTML为安全内容，避免Angular过滤
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

  clickShowAttachments(attachments: any[]): void {
    // 你的业务逻辑
    console.log(attachments);
  }
}

2. 在模板中用[innerHTML]渲染：

<div [innerHTML]="getAttachmentButtonHtml()"></div>

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