从 typescript 文件中存在的 html 元素调用 function（角度）

Question

我正在根据后端的特定条件渲染一个按钮。 该按钮是从 ts 文件 home.component.ts 中呈现的

if(backendLogic is true)
{
const buttonz = '<button onClick="xyz()"> Click me</button>';
return buttonz; 
}


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

现在当点击按钮时，它给出了一个错误，说 UncaughtReference: xyz is not defined。 xyz() 存在于同一个 typescript 文件中。 如何从这个 html 元素中调用这个 function？ 我正在使用 Angular。

Answer 1

你应该使用 *ngIf 指令：

组件.html：

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

组件.ts：

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

使用此方法，只有当backendLogic为true时，按钮才会在 DOM 中呈现。