contenteditable="false" 属性不适用于角度 10 中动态创建的跨度答案

【问题标题】：contenteditable="false" attribute not working on dynamically created span in angular 10contenteditable="false" 属性不适用于角度 10 中动态创建的跨度
【发布时间】：2020-12-03 06:27:43
【问题描述】：

我在 .ts 文件中动态添加了 span 元素，我在其中添加了 contenteditable 属性，但是当它在网页上呈现时，该属性没有出现在标签中。我已添加为 newHTML += &nbsp${taggedUserName}&nbsp ` .我想使用这个属性。原因：我想在文本中突出显示用户，为此我添加了 span 及其 css。

【问题讨论】：

标签： javascript angular

【解决方案1】：

您如何将 newHTML 添加到您的组件 html 文件中？您是否像这样使用 innerHTML 属性：

[innerHTML]=newHTML

更新：

Angular 有一个安全机制来防止 XSS，例如，因此，有时当您尝试在运行时将某些内容作为字符串添加到 html 中时，它会从 html 中删除一些属性/样式。

一个简单的例子是这样的：

constructor(private _sanitizer: DomSanitizer) { }

ngOnInit() {
  this.newHTML += this.sanitize(`&nbsp<span class='taggedUser' [contenteditable]='false'>${taggedUserName}&nbsp `)
}

sanitize(htmlStr: string): SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(htmlStr);
}

https://angular.io/api/platform-browser/DomSanitizer

【讨论】：

您是否尝试过使用 Angulars DomSanitizer 清理 html 字符串？
您真的不能在这里添加一些示例或链接吗？