在动态HTML字符串中调用函数
P粉132730839
P粉132730839 2023-08-17 10:33:17
0
1
541
<p>我在我的应用程序中有一个结构,我在其中生成动态的html。我在每个用户操作中添加一个html成员,该成员具有按钮。我想将我的定义的函数分配给这些按钮的(onclick)动作。然而,当我点击我即时生成的html字符串中的按钮时,我会收到相关函数未定义的错误。我该怎么办? 我的函数;</p> <pre class="brush:php;toolbar:false;">returnButtonGroup(key: string):string{ return '<i onclick="testFunc('' +key + '');" class="fa fa-wrench"></i>' } testFunc(key:string){ console.log(key); }</pre> <p>我通过在用户的每个操作中使用innerHtml添加i标签。对我能做什么有什么建议吗?谢谢。</p>
P粉132730839
P粉132730839

全部回复(1)
P粉551084295

考虑绑定的函数的作用域和上下文是很重要的。

在你的情况下,testFunc函数是在你的Angular组件中定义的,但是它是从生成的HTML字符串中的内联onclick属性中调用的。这可能会导致作用域和上下文问题。

为了在Angular中正确地绑定动态生成的HTML中的事件和函数,你应该使用Angular的事件绑定机制。

将你的returnButtonGroup函数更新为返回Angular模板代码而不是原始的HTML字符串。使用Angular的(click)事件绑定来绑定testFunc函数。

returnButtonGroup(key: string): string {
  return `<i (click)="testFunc('${key}')" class="fa fa-wrench"></i>`;
}

在HTML中使用

<div [innerHTML]="dynamicHtml"></div>

在你的component.ts中,创建一个属性来保存动态生成的HTML,并确保testFunc函数在组件内可访问。

dynamicHtml: string;

constructor() {
  this.dynamicHtml = this.returnButtonGroup('someKey'); // 使用适当的键调用你的方法
}

testFunc(key: string) {
  console.log(key);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板