Apprentissage angulaire en utilisant Tooltip comme exemple pour comprendre les instructions personnalisées

Cet article vous aidera à continuer à apprendre angular, en utilisant l'info-bulle comme exemple pour en savoir plus sur les instructions personnalisées. J'espère qu'il sera utile à tout le monde !

Dans l'article précédent, nous avons donné un aperçu de Angular. Dans le cadre des instructions personnalisées, nous avons pu les rédiger, mais dans les scénarios réels, nous avons encore besoin d'une gestion standardisée. Angular 的相关内容。在自定义指令的部分，我们已经能够实现编写，但是，在实际场景中，我们还需要标准化的管理。

Angular 是 Angular.js 的升版。【相关教程推荐：《angular教程》】

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(&#39;mouseover&#39;)
  OnEnter() {
    this.createTooltip();
  }
    
  // 监听鼠标移出
  @HostListener(&#39;mouseout&#39;)
  OnOut() {
    this.destroyTooltip();
  }

}

到这里，已经完成了 99% 的功能了，下面我们在页面上调用即可。

页面上调用

我们在 user-list.component.html 上添加下面的内容：

<p style="margin-top: 100px;">
  <!-- [appTooltip]="&#39;Hello Jimmy&#39;" 是重点 -->
  <span 
    [appTooltip]="&#39;Hello Jimmy&#39;" 
    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

Angular est une version améliorée d'Angular.js. [Recommandations de didacticiel associées : "

Tutoriel angulaire

"]

Donc, dans cet article, nous utiliserons Tooltip pour expliquer le contenu des instructions personnalisées. Rendu en ligne, comme suit : 🎜🎜🎜🎜Structure des répertoires🎜🎜Sur la base du projet de code implémenté dans l'article précédent, exécutez la ligne de commande : 🎜rrreee🎜Après avoir exécuté la ligne de commande ci-dessus, vous obtiendrez la structure du répertoire de fichiers de app/directive/tooltip comme suit : 🎜rrreee🎜Eh bien, ici, j'ai mis le composant dans tooltip code> Le même niveau, principalement pour la commodité de la gestion. Bien sûr, cela varie d'une personne à l'autre, vous pouvez le mettre dans le dossier <code>components du composant public. 🎜🎜Composant d'info-bulle d'écriture🎜🎜Dans le fichier html, il y a : 🎜rrreee🎜Dans le style Dans le fichier .scss, il y a : 🎜rrreee

🎜Hmm~, css est une chose magique, je vais organiser un article pour expliquer . sass plus tard. Contenu associé...🎜

🎜Ensuite, dans le fichier javascript tooltip.component.ts le contenu est le suivant : 🎜 rrreee🎜Écrire les instructions de l'info-bulle🎜🎜C'est l'objet de cet article, je vais marquer les instructions spécifiques sur le code~🎜. 🎜Fichiers associés Le contenu de tooltip.directive.ts est le suivant : 🎜rrreee🎜À ce stade, la fonction de 99% est maintenant terminée. sur la page. 🎜🎜Page d'appel🎜🎜Nous ajoutons ce qui suit sur user-list.component.html Contenu : 🎜rrreee🎜TooltipDirective Nous avons déclaré cette directive sur app.module.ts, nous pouvons l'appeler directement. L'effet actuel est le suivant : 🎜🎜🎜🎜La tooltip que nous avons implémentée est un affichage centré en bas, c'est-à-dire que nous utilisons généralement le cadre, tel que tooltip dans conception angulaire de fourmis >bottom. Pour les autres attributs, si les lecteurs sont intéressés, ils peuvent être développés. 🎜🎜À ce stade, nous pouvons bien conserver le fichier d'instructions que nous avons écrit. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!