本篇文章帶大家繼續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 指令
這是本文的重點，具體的說明，我在代碼上標注出來～
相關的文件 tooltip.directive.ts 內容如下：
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();
}
}到這里，已經完成了 99% 的功能了，下面我們在頁面上調用即可。
頁面上調用
我們在 user-list.component.html 上添加下面的內容：
<p style="margin-top: 100px;"> <!-- [appTooltip]="'Hello Jimmy'" 是重點 --> <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>
TooltipDirective 這個指令我們已經在 app.module.ts 上進行聲明，我們直接調用即可。目前的效果如下：
我們實現的 tooltip 是底部居中展示，也就是我們平常使用框架，比如 angular ant design 中 tooltip 的 bottom 屬性。對于其他屬性，讀者感興趣的話，可以進行擴展。
至此，我們可以很好的維護自己編寫的指令文件了。
