Angular learning using Tooltip as an example to understand custom instructions

# 进入 directives 文件夹

$ cd directives

# 创建 tooltip 文件夹

$ mkdir tooltip

# 进入 tooltip 文件夹

$ cd tooltip

# 创建 tooltip 组件

$ ng generate component tooltip

# 创建 tooltip 指令

$ ng generate directive tooltip

tooltip

├── tooltip                                           // tooltip 组件

│    ├── user-list.component.html                     // 页面骨架

│    ├── user-list.component.scss                     // 页面独有样式

│    ├── user-list.component.spec.ts                  // 测试文件

│    └── user-list.component.ts                       // javascript 文件

├── tooltip.directive.spec.ts                         // 测试文件

└── tooltip.directive.ts                              // 指令文件

<div class="caret"></div>

<div class="tooltip-content">{{data.content}}</div>

$black: #000000;

$white: #ffffff;

$caret-size: 6px;

$tooltip-bg: transparentize($black, 0.25); // transparentize 是 sass 的语法

$grid-gutter-width: 30px;

$body-bg-color: $white;

$app-anim-time: 200ms;

$app-anim-curve: ease-out;

$std-border-radius: 5px;

$zindex-max: 100;

// :host 伪类选择器，给组件元素本身设置样式

:host {

  position: fixed;

  padding: $grid-gutter-width/3 $grid-gutter-width/2;

  background-color: $tooltip-bg;

  color: $body-bg-color;

  opacity: 0;

  transition: all $app-anim-time $app-anim-curve;

  text-align: center;

  border-radius: $std-border-radius;

  z-index: $zindex-max;

}

.caret { // 脱字符

  width: 0;

  height: 0;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-bottom: 6px solid $tooltip-bg;

  position: absolute;

  top: -$caret-size;

  left: 50%;

  margin-left: -$caret-size/2;

  border-bottom-color: $tooltip-bg;

}

import {

  Component,

  ElementRef, // 元素指向

  HostBinding,

  OnDestroy,

  OnInit

} from '@angular/core';

@Component({

  selector: 'app-tooltip', // 标识符，表明我这个组件叫做啥，这里是 app-tooltip

  templateUrl: './tooltip.component.html', // 本组件的骨架

  styleUrls: ['./tooltip.component.scss'] // 本组件的私有样式

})

export class TooltipComponent implements OnInit {

  public data: any; // 在 directive 上赋值

  private displayTimeOut:any;

  // 组件本身 host 绑定相关的装饰器

  @HostBinding('style.top')  hostStyleTop!: string;

  @HostBinding('style.left') hostStyleLeft!: string;

  @HostBinding('style.opacity') hostStyleOpacity!: string;

  constructor(

    private elementRef: ElementRef

  ) { }

  ngOnInit(): void {

    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    if(this.displayTimeOut) {

      clearTimeout(this.displayTimeOut)

    }

    this.displayTimeOut = setTimeout((_: any) => {

      // 这里计算 tooltip 距离左侧的距离，这里计算公式是：tooltip.left + 目标元素的.width - (tooltip.width/2)

      this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'

      this.hostStyleOpacity = '1';

      this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'

    }, 500)

  }

  // 组件销毁

  ngOnDestroy() {

    // 组件销毁后，清除定时器，防止内存泄露

    if(this.displayTimeOut) {

      clearTimeout(this.displayTimeOut)

    }

  }

}

import {

  ApplicationRef, // 全局性调用检测

  ComponentFactoryResolver, // 创建组件对象

  ComponentRef, // 组件实例的关联和指引，指向 ComponentFactory 创建的元素

  Directive, ElementRef,

  EmbeddedViewRef, // EmbeddedViewRef 继承于 ViewRef，用于表示模板元素中定义的 UI 元素。

  HostListener, // DOM 事件监听

  Injector, // 依赖注入

  Input

} from '@angular/core';

import { TooltipComponent } from './tooltip/tooltip.component';

@Directive({

  selector: '[appTooltip]'

})

export class TooltipDirective {

  @Input("appTooltip") appTooltip!: string;

  private componentRef!: ComponentRef<TooltipComponent>;

  // 获取目标元素的相关位置，比如 left, right, top, bottom

  get elementPosition() {

    return this.elementRef.nativeElement.getBoundingClientRect();

  }

  constructor(

    protected elementRef: ElementRef,

    protected appRef: ApplicationRef,

    protected componentFactoryResolver: ComponentFactoryResolver,

    protected injector: Injector

  ) { }

  // 创建 tooltip

  protected createTooltip() {

    this.componentRef = this.componentFactoryResolver

      .resolveComponentFactory(TooltipComponent) // 绑定 tooltip 组件

      .create(this.injector);

    this.componentRef.instance.data = { // 绑定 data 数据

      content: this.appTooltip,

      element: this.elementRef.nativeElement,

      elementPosition: this.elementPosition

    }

    this.appRef.attachView(this.componentRef.hostView); // 添加视图

    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

    document.body.appendChild(domElem);

  }

  // 删除 tooltip

  protected destroyTooltip() {

    if(this.componentRef) {

      this.appRef.detachView(this.componentRef.hostView); // 移除视图

      this.componentRef.destroy();

    }

  }

  // 监听鼠标移入

  @HostListener('mouseover')

  OnEnter() {

    this.createTooltip();

  }

  // 监听鼠标移出

  @HostListener('mouseout')

  OnOut() {

    this.destroyTooltip();

  }

}

<p style="margin-top: 100px;">

  <!-- [appTooltip]="&#39;Hello Jimmy&#39;" 是重点 -->

  <span

    [appTooltip]="'Hello Jimmy'"

    style="margin-left: 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;"

  >Jimmy</span>

</p>