时间戳

首页 > 解决方案 > 角度中的 innerHTML 的正确替代方法是什么

angular - 角度中的 innerHTML 的正确替代方法是什么

问题描述

在我的角度应用程序中，我使用工具提示。当用户将鼠标悬停在元素上时，我会更改提示值。目前我使用innerHTML和更新。效果很好。

来自安全团队，他们要求我避免innerHTML被使用。那么这个的替代品是什么？

有人建议我正确的方法吗？提前致谢。

指令代码：

   showToolTip() {
        this.container = this.renderer.createElement('div');
        this.container.setAttribute('class', `ibo-tooltip ${this.ToolTip.class}`);
        this.container.setAttribute('id', `${this.ToolTip.id}`);
        this.container.innerHTML = `<div>${this.ToolTip.info}</div>`;

        return this.container;

    }

标签： angularangular8

解决方案

所以这里是StackBlitz项目来演示创建动态工具提示组件。

我有一个工具提示指令myTooltip，它负责在悬停时创建一个动态工具提示组件，并在鼠标离开事件时删除。

  constructor(private viewContainerRef: ViewContainerRef,
              private resolver: ComponentFactoryResolver) {
     this.factory = this.resolver.resolveComponentFactory(TooltipComponent);
  }

  @HostListener('focusin')
  @HostListener('mouseenter')
  show(): void {
    this.tooltipComp = this.viewContainerRef.createComponent(this.factory);
    this.tooltipComp.instance.content = this.tooltipContent;
  }

  @HostListener('focusout')
  @HostListener('mouseleave')
  @HostListener('DOMNodeRemovedFromDocument')
  hide(): void {
    this.tooltipComp && this.tooltipComp.destroy();
  }

然后我有一个工具提示组件，它接受一个content变量（值可以从主机组件传递）。所以从技术上讲，您可以将任何内容传递给您的工具提示组件。

@Component({
  selector: 'my-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: [ './tooltip.component.css' ]
})
export class TooltipComponent  {
  name = 'Angular';
  content: any;
}

最后，像这样使用它。

<div myTooltip tooltipContent='Hello There!'>
   Hover on me
</div>

当然，您必须自己实现工具提示方向和 CSS 逻辑。

https://stackblitz.com/edit/prabhat-angular-tooltip

推荐阅读