Какой правильный альтернатива для внутреннего HTML в angular

Question

В моем приложении angular я использую подсказку. когда пользователь наводит курсор на элемент, я меняю значение подсказки. в настоящее время я использую 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;

    }

Answer 1

Итак, вот проект StackBlitz , демонстрирующий создание компонента всплывающей подсказки динамического c.

У меня есть одна директива всплывающей подсказки myTooltip, которая отвечает за создание динамического элемента c компонент всплывающей подсказки при наведении курсора мыши и удаление при отпускании мыши.

  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 logi c поверх него.

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

Answer 2

Вы можете сделать, это иметь переменную переключения, которая говорит, хотите ли вы показать подсказку или нет

this.container.innerHTML = $ {this.ToolTip.info} ; это действительно вызовет проблемы безопасности, но это решение [innerHTML] = "Tooltip.info" не будет и angular санирует строку html в этом случае, она не равна element.innerHTML. https://angular.io/guide/security#sanitization - пример , пожалуйста, прочитайте это в разделе «Безопасность» и использует innerHTML привязку свойства

<-- Template -->
<ng-container *ngIf="isTooltipShow">
   <div class="ibo-tooltip {{Tooltip.class}}" [id]="Tooltip.id" [innerHTML]="Tooltip.info">
   </div>
</ng-container>

//Typescript
 isTooltipShow: boolean;

 showTooltip() {
     this.isTooltipShow = true;
 }

Если Tooltip.info не содержит строк html, вы можете go для этого решения

<-- Template -->
<ng-container *ngIf="isTooltipShow">
   <div class="ibo-tooltip {{Tooltip.class}}" [id]="Tooltip.id">
      {{ Tooltip.info }}
   </div>
</ng-container>

//Typescript
 isTooltipShow: boolean;

 showTooltip() {
     this.isTooltipShow = true;
 }