有个需求要求后端返回html，是否可以绑定事件？

Question

现在有个需求要求我用nestjs写一个接口，处理本地一个json文件处理成一个html页面返回给前端
，我想问比如返回的格式是这样，"text":'<style>.helloword{width:100px;}</style> <div class="helloword" (click)="handleclick()">你好</div>'
这样返回去的样式和点击事件是否能生效。如果不行该如何做？大佬们

Answer 1

确实 我第一时间想到的跟楼上一样，将事件绑在父节点上，通过event.target来判断是否为目标元素的点击

Answer 2

1. 不能生效。
2. 你可以在节点插入 DOM 后，手动绑定
3. 如果你的事件处理函数都能暴露到全局，把 (click) 改成 onclick 也可以
4. 不过最推荐的是，不要直接插入 HTML，会很大的 XSS 风险。如果真要插入，可以把事件绑在父节点上，利用冒泡处理。

Answer 3

首先，对于样式和事件是否可以生效的问题，答案是肯定的。只要返回的 HTML 包含正确的 CSS 类和正确的 Angular 事件绑定，样式和事件都应该可以生效。

然而，你需要确保以下几点：

1. 返回的 HTML 必须是一个有效的 HTML 结构。例如，你需要在 <div> 标签中包含 <style> 和 (click) 属性，且它们需要放在 <div> 的开始和结束标签之间。
2. 返回的样式必须与 HTML 元素匹配。例如，如果你在 <style> 中定义了 .helloworld，那么你需要在返回的 HTML 中有一个类名为 helloworld 的元素。
3. 对于 Angular 事件绑定，你需要确保 handleclick() 方法已经在你的 Angular 组件中定义了。

如果以上条件都满足，那么你应该可以在 NestJS 中返回带有样式和事件的 HTML。

如果你遇到任何具体的问题或错误，可以提供更多的信息，我会很乐意帮助你解决。