Angular学习之以Tooltip为例了解自定义指令

1. Angular中的自定义指令

在Angular中，除了内置指令（如ngIf、ngFor等），还可以自定义指令来扩展应用程序的功能。自定义指令可以是属性指令，也可以是结构指令。属性指令用于修改元素属性或CSS样式，而结构指令用于修改HTML元素的结构。

自定义指令是一个带有@Directive装饰器的类，在该装饰器中可以指定指令的选择器、提供程序等信息。指令类中必须有一个或多个指令处理器方法，用于在DOM元素上执行操作。指令处理器方法可以是@HostListener装饰器中指定的方法，或者是指令类中定义的其他方法。

2. Tooltip指令介绍

Tooltip指令是一种常用的自定义指令，在鼠标悬停在元素上时显示一个提示框，用于向用户提供有用的信息或指导。在Angular Material中，该指令已经内置并实现为Angular CDK中的一个工具提示组件。

2.1 Tooltip指令的使用

要在Angular应用程序中使用Tooltip指令，必须先在应用程序中导入Angular Material库和CDK模块。然后，可以将matTooltip指令应用于任何元素上，以显示默认的浮动提示框。例如：

import {MatTooltipModule} from '@angular/material/tooltip';

@NgModule({
  imports: [MatTooltipModule],
})
export class MyModule {}
<button matTooltip="Tooltip message">Hover me!</button>

上面的代码中，matTooltip指令已应用于button按钮元素上，以显示默认的浮动提示框。当鼠标悬停在按钮上时，将显示一个小窗口，其中包含指定的提示消息。

2.2 自定义Tooltip指令

要自定义Tooltip指令，可以创建一个新的指令类，并在类中实现Tooltip的处理程序逻辑。在本文的余下部分中，将介绍如何创建一个可配置的Tooltip指令，以及如何将其应用于任意元素上。

3. 自定义Tooltip指令的实现

下面的自定义Tooltip指令允许应用程序开发人员使用CSS样式和属性来定制提示框的外观和行为。该指令将指定的元素包装在一个<div>标签中，并添加一个自定义的data-tooltip属性。然后，使用@HostListener装饰器监听鼠标事件，显示和隐藏提示框，并将其位置设置为悬停元素的上方或下方。

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

@Directive({
  selector: '[myTooltip]',
})
export class MyTooltipDirective {
  @Input() tooltip: string;
  @Input() tooltipPosition: 'top' | 'bottom' = 'bottom';
  private tooltipElement: HTMLElement;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  @HostListener('mouseenter') onMouseEnter() {
    if (!this.tooltipElement) {
      this.showTooltip();
    }
  }
  @HostListener('mouseleave') onMouseLeave() {
    if (this.tooltipElement) {
      this.hideTooltip();
    }
  }
  private showTooltip() {
    this.tooltipElement = this.renderer.createElement('div');
    this.renderer.appendChild(
      this.tooltipElement,
      this.renderer.createText(this.tooltip)
    );
    this.renderer.addClass(this.tooltipElement, 'tooltip');
    const hostPos = this.el.nativeElement.getBoundingClientRect();
    const tooltipPos = this.tooltipElement.getBoundingClientRect();
    switch (this.tooltipPosition) {
      case 'top':
        this.renderer.setStyle(
          this.tooltipElement,
          'top',
          `${hostPos.top - tooltipPos.height}px`
        );
        break;
      case 'bottom':
      default:
        this.renderer.setStyle(
          this.tooltipElement,
          'top',
          `${hostPos.bottom}px`
        );
        break;
    }
    this.renderer.setStyle(
      this.tooltipElement,
      'left',
      `${hostPos.left}px`
    );
    this.renderer.appendChild(document.body, this.tooltipElement);
  }
  private hideTooltip() {
    this.renderer.removeChild(document.body, this.tooltipElement);
    this.tooltipElement = null;
  }
}

该指令提供了两个可配置的输入属性tooltip和tooltipPosition。在应用程序中，可以在任何元素上使用myTooltip指令，并指定这些属性的值。例如：

<button myTooltip tooltip="Tooltip message" tooltipPosition="top">Hover me!</button>

上面的代码中，添加了myTooltip指令，并指定了自定义的tooltip和tooltipPosition属性的值。当鼠标悬停在按钮上时，将显示一个自定义外观和位置的提示框。

4. 结论

本文介绍了在Angular中使用自定义指令的方法，以及通过创建自定义的Tooltip指令来扩展应用程序的功能。通过@HostListener装饰器监听鼠标事件，并使用Renderer2服务动态向DOM中添加和删除元素，可以轻松地实现自定义的提示框功能。