Блог

Я новичок в директивах angular 7. Я создал пользовательскую директиву всплывающей подсказки, используя angular 7. Теперь я не могу указать разрывы строк при передаче текста всплывающей подсказки из моего html. Я хочу, чтобы разрыв строки после текста заголовка подсказки, который я передаю из html. Есть идеи, как этого добиться? Попытался передать amp;#10; and amp;#013; код для разрыва строки в моей входной строке в директиву всплывающей подсказки. Тоже не сработало.

Вот что я пробовал до сих пор.

Моя директива: tooltip.directive.ts:

 import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
  selector: '[tooltip]'
})
export class TooltipDirective {
  @Input('tooltip') tooltipTitle: string;
  @Input() placement: string;
  @Input() delay: number;
  tooltip: HTMLElement;
  offset = 10;

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
    if (!this.tooltip) { this.show(); }
  }

  @HostListener('mouseleave') onMouseLeave() {
    if (this.tooltip) { this.hide(); }
  }

  show() {
    this.create();
    this.setPosition();
    this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
  }

  hide() {
    this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
    window.setTimeout(() => {
      this.renderer.removeChild(document.body, this.tooltip);
      this.tooltip = null;
    }, 0);
  }

  create() {
    this.tooltip = this.renderer.createElement('span');

    this.renderer.appendChild(
      this.tooltip,
      this.renderer.createText(this.tooltipTitle) // textNode
    );

    this.renderer.appendChild(document.body, this.tooltip);

    this.renderer.addClass(this.tooltip, 'ng-tooltip');
    this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
  }

  setPosition() {
    const hostPos = this.el.nativeElement.getBoundingClientRect();
    const tooltipPos = this.tooltip.getBoundingClientRect();

    let top, left;

    if (this.placement === 'top') {
      top = hostPos.top - tooltipPos.height - this.offset;
      left = hostPos.left   (hostPos.width - tooltipPos.width) / 2;
    }
   /* other positions to be added */
    this.renderer.setStyle(this.tooltip, 'top', `${top}px`);
    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
  }
}
  

CSS :

 /* Styles for tooltip */
.ng-tooltip {
  position: absolute;
  max-width: 150px;
  font-size: 14px;
  text-align: center;
  color: #f8f8f2;
  padding: 3px 8px;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  background-color: #38393b;
  z-index: 1000;
  opacity: 0;
}
.ng-tooltip:after {
  content: "";
  position: absolute;
  border-style: solid;
}
.ng-tooltip-top:after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-color: #38393b transparent transparent transparent;
}

.ng-tooltip-show {
  opacity: 1;
}
  

Из html-файла я вызываю директиву всплывающей подсказки, передавая текст следующим образом:

   <div tooltip="Title: ( want a line break here) amp;#013; {{someVariable}}" placement="top" class="remark">Hover Here</div>
  

Это можно решить, используя любой из подходов, либо создать два разных входных параметра, таких как @Input('Title'): string и @Input('Body'): string , и передать в два разных параметра. ИЛИ, если вы хотите передать его в одном параметре, используйте интерфейс, такой как

 export interface IToolTip {
    title?: string;
    body: string;
    footer?: string;
}
  

Назначьте этот интерфейс вашей переменной всплывающей подсказки @Input('tooltip') tooltipTitle: ITooltip; , обо всем остальном можно позаботиться в разделе create() funciton.

Спасибо.