数据属性绑定不适用于 [innerHTML] Angular答案

【问题标题】：data attr binding is not working with [innerHTML] Angular数据属性绑定不适用于 [innerHTML] Angular
【发布时间】：2020-01-02 11:01:57
【问题描述】：

我正在使用一个变量，该变量具有标签以及数据属性（数据标题），一旦呈现角度，数据属性在视图中不可见。其他默认属性（如 class、id）照常工作。

我已经尝试过 attr.data-title="some text" 和 [attr.data-title]="{some text}"。 p>

这就是我的代码的样子：

let VARIABLE_TO_CHANGE = "Hello <span [attr.data-title]='test'>{name}</span>"

<div [innerHTML]="('VARIBLE_TO_CHANGE'|translate).replace('{name}', 'world')"></div>

如果我在浏览器检查元素中看到结果，我希望看到

Hello <span data-title="test">world</span>

但我所看到的，

Hello <span>world</span>

提前致谢。

【问题讨论】：

试试这个：let VARIABLE_TO_CHANGE = "Hello <span data-title='test'>{name}</span>"
试过@VitaliiIlchenko，不工作。
跟DomSanitizer有关系吗？

标签： angular typescript attributes translate

【解决方案1】：

使用safeHtml 管道和.sanitized.bypassSecurityTrustHtml

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `<div #div [innerHTML]="content | safeHtml"></div>1`,
})

肯定会成功

【讨论】：

谢谢@Ajas Aju。好主意:)