如何使用 angular 7 向自定義工具提示指令添加換行符

Question

我是 angular 7 指令的新手。 我使用 angular 7 創建了一個自定義工具提示指令。現在，當我從 html 傳遞工具提示文本時，我無法指定換行符。 我想在從 html 傳遞的 Tootltip 標題文本之后換行。 知道如何實現這一目標嗎？ 試圖通過
 and 
 
 and 
 在工具提示指令的輸入字符串中換行的代碼。 也沒有用。

這是我到目前為止所嘗試的。

我的指令：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) &#013; {{someVariable}}" placement="top" class="remark">Hover Here</div>

Answer 1

這可以通過采取任何一種方法來解決，要么創建兩個不同的輸入，例如@Input('Title'): string和@Input('Body'): string並傳遞給兩個不同的參數。 或者，如果您想在單個參數中傳遞它，請使用接口，例如

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

將此接口分配給您的工具提示變量@Input('tooltip') tooltipTitle: ITooltip; 其余的事情可以在create()函數下處理。

謝謝。