1. 首頁 > 生活百科 > >

Angular學習之以Tooltip為例了解自定義指令

小知識it知識

本篇文章帶大家繼續angular的學習 ， 以Tooltip為例來了解一下自定義指令 ， 希望對大家有所幫助！

Angular學習之以Tooltip為例了解自定義指令

文章插圖

在之前的文章中 ， 我們已經概覽了 Angular 的相關內容 。 在自定義指令的部分 ， 我們已經能夠實現編寫 ， 但是 ， 在實際場景中 ， 我們還需要標準化的管理 。
Angular 是 Angular.js 的升版 。 【相關教程推薦：《angular教程》】
So ， 本文 ， 我們就以 Tooltip 來講解下自定義指令的內容 。
線上效果圖 ， 如下：
Angular學習之以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 內容如下：
【Angular學習之以Tooltip為例了解自定義指令】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 = https://www.52zixue.com/zhanzhang/webqd/js/04/13/69689/{ // 綁定 data 數據 content: this.appTooltip, element: this.elementRef.nativeElement, elementPosition: this.elementPosition } this.appRef.attachView(this.componentRef.hostView); // 添加視圖 const domElem = (this.componentRef.hostView as EmbeddedViewRef

推薦閱讀