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

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  private tooltipElement: HTMLElement;

  constructor(private elementRef: ElementRef) {}

  @Input('appTooltip') tooltipText: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.showTooltip();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.hideTooltip();
  }

  private showTooltip() {
    this.tooltipElement = document.createElement('div');
    this.tooltipElement.className = 'tooltip';
    this.tooltipElement.textContent = this.tooltipText;
    this.tooltipElement.style.position = 'absolute';
    this.tooltipElement.style.backgroundColor = 'lightgray';
    this.tooltipElement.style.padding = '5px';
    this.tooltipElement.style.borderRadius = '5px';
    this.tooltipElement.style.zIndex = '9999';

    const { top, left, width, height } = this.elementRef.nativeElement.getBoundingClientRect();
    this.tooltipElement.style.top = `${top + height}px`;
    this.tooltipElement.style.left = `${left}px`;

    document.body.appendChild(this.tooltipElement);
  }

  private hideTooltip() {
    if (this.tooltipElement) {
      document.body.removeChild(this.tooltipElement);
      this.tooltipElement = null;
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button appTooltip="This is the first line.\nThis is the second line.">Hover me</button>
    </div>
  `,
})
export class AppComponent {}