Angular中TS文件动态生成的HTML元素如何调用同文件内定义的函数

错误原因 #

你直接拼接HTML字符串使用原生onClick属性绑定事件的方式，调用的是全局window作用域下的函数，而你定义的xyz()是Angular组件类的实例方法，不属于全局作用域，因此会抛出未定义错误。

推荐解决方案（Angular最佳实践） #

优先使用Angular自带的结构指令*ngIf做条件渲染，完全不需要手动拼接HTML字符串，天然支持绑定组件实例方法：

1. 在home.component.html模板中添加条件渲染的按钮：

<button *ngIf="backendLogic" (click)="xyz()">Click me</button>

2. 在home.component.ts中声明布尔类型的属性backendLogic，拿到后端返回结果后直接给该属性赋值即可：

// 声明属性，默认可以设为false
backendLogic: boolean = false;

// 调用后端接口拿到结果后赋值
getBackendData() {
  this.api.getData().subscribe(res => {
    this.backendLogic = res.condition; // 后端返回的逻辑判断值
  })
}

xyz() {
  console.log("haha");
}

特殊场景解决方案（必须动态生成HTML时） #

如果业务场景确实需要动态生成DOM元素，使用Angular提供的Renderer2API生成元素并绑定事件，不要直接写原生onClick：

1. 先在组件构造器中注入Renderer2和ElementRef：

import { Component, ElementRef, Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

2. 动态生成按钮并绑定事件的逻辑：

if (this.backendLogic) {
  // 创建按钮元素和文本
  const button = this.renderer.createElement('button');
  const btnText = this.renderer.createText('Click me');
  this.renderer.appendChild(button, btnText);
  
  // 绑定点击事件到当前组件的xyz方法
  this.renderer.listen(button, 'click', () => this.xyz());
  
  // 将按钮插入到页面指定容器，比如id为btn-container的元素
  const container = this.el.nativeElement.querySelector('#btn-container');
  this.renderer.appendChild(container, button);
}

xyz() {
  console.log("haha");
}

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