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文档创建，我不知道如何更改属性名称。

- LeO

Answer 1

演示 你可以使用hostlistener和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;
  }

}

演示 第二种方法是使用CSS，你可以将下面的代码放入style.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;  
}

- mr. pc_coder

---

唔...这只适用于一个元素的情况下才能正常工作。一旦有多个元素，这种方法就会失败 - 真是遗憾 https://stackblitz.com/edit/angular-6focgz 另外还有一个问题，如果内容是由DomSanitizer设置的，这样做是否有效？ - LeO

是的，我看到你的示例可以工作。但是我有两个备注：在 app.component 中，你使用了 @Component 和 @Directive，我想这应该是一个打字错误。我也更新了我的示例以满足我的初始需求。https://stackblitz.com/edit/angular-r1jsma。不幸的是，我不知道如何更好地初始化指令。有什么想法吗？ - LeO

尝试第二种方法，我添加了答案 @LeO - mr. pc_coder

原则上这个可以工作，尽管我在CSS方面遇到了一些麻烦。我的代码有一个问题是我需要应用::ng-deep，这不是我首选的解决方案。另外，我需要稍微改变一下内容 - 我以为我可以一步完成。无论如何 - 我已经点赞了你的回答 - 并期待一种允许一些操作的解决方案。无论如何，谢谢。 - LeO