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

本篇文章带大家继续angular的学习，以Tooltip为例来了解一下自定义指令，希望对大家有所帮助！

在之前的文章中，我们已经概览了 Angular 的相关内容。在自定义指令的部分，我们已经能够实现编写，但是，在实际场景中，我们还需要标准化的管理。

Angular 是 Angular.js 的升版。

So，本文，我们就以 Tooltip 来讲解下自定义指令的内容。

线上效果图，如下：

目录结构

在上一篇文章的实现的代码项目基础上，执行命令行：

# 进入 directives 文件夹$ cd directives # 创建 tooltip 文件夹$ mkdir tooltip # 进入 tooltip 文件夹$ cd tooltip # 创建 tooltip 组件$ ng generate component tooltip # 创建 tooltip 指令$ ng generate directive tooltip

执行完上面的命令行之后，你会得到 app/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                              // 指令文件

嗯，这里我将组件放在 tooltip 的同级，主要是方便管理。当然，这个因人而异，你可以放在公共组件 components 文件夹内。

编写 tooltip 组件

在 html 文件中，有：

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

在样式文件 .scss 中，有：

$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;}

嗯～，css 是一个神奇的东西，之后会安排一篇文章来讲解下 sass 相关的内容...

然后，在 javascript 文件 tooltip.component.ts 内容如下：

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)    }  }}

编写 tooltip 指令

这是本文的重点，具体的说明，我在代码