Angular HTML字符串 - 重命名属性

Question

我有一个类似的 HTML 字符串

 <span class="diff-html-changed" id="1" changes="MyText" >test </span>

我想将文本显示为 html。我把它包括在内

displayedContentInTemplate: SafeHtml;
private sanitized: DomSanitizer,
....
displayedContentInTemplate = this.sanitized.bypassSecurityTrustHtml(contentAsString);

我的问题是changes的内容没有显示出来。因此我想将changes 重命名为title。这将在悬停文本时显示MyText。

如何正确更改属性changes？字符串中的简单替换可能会替换属于显示文本的文本。通过简单地创建 HTML 文档，我不知道如何更改属性名称。

Answer 1

Demo你可以用hostlistener和directive create one directive来实现

import { Directive, HostListener, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[changes]'
})
export class HoverClassDirective {

  constructor(public elementRef:ElementRef) { }
  @Input('changes') changes:any;  

  @HostListener('mouseenter') onMouseEnter() {
    console.log()
    this.elementRef.nativeElement.title=this.changes;
 }

  @HostListener('mouseleave') onMouseLeave() {
    this.elementRef.nativeElement.title=this.changes;
  }

}

Demo 第二种方式是 css 你可以把下面的代码放到 sytle.css 也可以动态添加

span {
  position: relative; 
}
span::after{
  position: absolute;
  display: none;  
}
span::after {
  content: attr(changes);  
  top: -20;
  left: -5px;
  background: white;
  border-radius: 4px;  
  padding: 2px 6px;
  white-space: nowrap;
  color: black;
  border: 1px solid gray
}
span:hover::after {
  display: block;  
}