Angular中href绑定的click事件无法触发问题求助

你的核心问题是：通过字符串拼接生成的<a>标签里的Angular事件绑定(click)不会被Angular编译器处理，所以onClickDelegateAccess函数根本无法被触发——Angular只会编译组件模板里的静态HTML，动态生成的字符串HTML不会被解析绑定。

下面是几种可行的解决思路：

1. 改用Angular原生模板/组件自定义列（最推荐） #

如果你的表格组件支持自定义列模板（比如NG-ZORRO、PrimeNG等主流表格组件都支持），直接在组件模板里写原生的事件绑定就行，这是最规范且安全的方式：

<!-- 以NG-ZORRO表格为例 -->
<nz-table [nzData]="yourDataList">
  <thead>
    <tr>
      <th>Company Guid</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of yourDataList">
      <td>
        <a href="#" (click)="onClickDelegateAccess(item.companyGuid); $event.preventDefault()">{{ item.companyGuid }}</a>
      </td>
    </tr>
  </tbody>
</nz-table>

这种方式下，Angular会正常编译事件绑定，点击时必然能触发你的函数。

2. 用Renderer2动态创建元素并绑定事件 #

如果必须通过view方法返回可渲染内容，不要拼接字符串，而是用Angular的Renderer2 API创建DOM元素并直接绑定事件：

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

// 修改columns里的view方法
columns: Array<GuiColumn> = [
  {
    header: 'Company Guid',
    field: 'companyGuid',
    view: (value: string, obj: any) => {
      const link = this.renderer.createElement('a');
      this.renderer.setProperty(link, 'textContent', obj.companyGuid);
      this.renderer.setProperty(link, 'href', '#');
      // 直接绑定点击事件，this指向当前组件
      this.renderer.listen(link, 'click', (e) => {
        e.preventDefault();
        this.onClickDelegateAccess(obj.companyGuid);
      });
      return link; // 返回DOM元素而非字符串
    },
    width: 330
  }
];

onClickDelegateAccess(companyGuid: string) {
  alert("hi");
}

这种方式避免了字符串拼接的安全风险，同时保证事件绑定有效。

3. 原生onclick+全局暴露（不推荐，有安全风险） #

如果以上两种方式都无法实现，只能用字符串HTML的话，可以改用原生onclick事件，同时把组件方法暴露到全局（注意：这种方式有XSS风险，仅作为临时方案）：

import { DomSanitizer, SafeHtml } from '@angular/core';

constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
  // 将组件方法暴露到window全局
  (window as any).onClickDelegateAccess = (guid: string) => {
    this.onClickDelegateAccess(guid);
  };
}

columns: Array<GuiColumn> = [
  {
    header: 'Company Guid',
    field: 'companyGuid',
    view: (value: string, obj: any): SafeHtml => {
      // 用原生onclick，同时阻止默认跳转
      const html = `<a href="#" onclick="onClickDelegateAccess('${obj.companyGuid}'); return false;">${obj.companyGuid}</a>`;
      // 标记HTML为安全，避免被Angular过滤
      return this.sanitizer.bypassSecurityTrustHtml(html);
    },
    width: 330
  }
];

onClickDelegateAccess(companyGuid: string) {
  alert("hi");
}

注意：如果companyGuid包含特殊字符（比如单引号），需要先转义，否则会导致JS语法错误，同时恶意内容可能引发XSS攻击，所以尽量不用这种方式。

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