Angular-Lernen am Beispiel von Tooltip, um benutzerdefinierte Anweisungen zu verstehen

Dieser Artikel wird Ihnen beim weiteren Lernen von Angular helfen. Ich hoffe, dass er für alle hilfreich ist. Verwenden Sie dazu den Tooltip als Beispiel.

Im vorherigen Artikel haben wir einen Überblick über Angular gegeben. Was die benutzerdefinierten Anweisungen angeht, konnten wir sie schreiben, aber in tatsächlichen Szenarien benötigen wir immer noch eine standardisierte Verwaltung. 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 ist eine aktualisierte Version von Angular.js. [Verwandte Tutorial-Empfehlungen: „

Angular Tutorial

“]

In diesem Artikel verwenden wir also Tooltip, um den Inhalt benutzerdefinierter Anweisungen zu erläutern. Online-Renderings wie folgt: 🎜🎜🎜🎜Verzeichnisstruktur🎜🎜Basierend auf dem im vorherigen Artikel implementierten Codeprojekt, führen Sie Befehlszeile aus: 🎜rrreee🎜Nachdem Sie die obige Befehlszeile ausgeführt haben, erhalten Sie die Dateiverzeichnisstruktur von app/directive/tooltip wie folgt: 🎜rrreee🎜Nun, hier habe ich die Komponente in tooltip eingefügt. Code> Die gleiche Ebene, hauptsächlich zur Vereinfachung der Verwaltung. Dies ist natürlich von Person zu Person unterschiedlich. Sie können es im öffentlichen Komponentenordner <code>components ablegen. 🎜🎜Tooltip-Komponente schreiben🎜🎜In der html-Datei gibt es: 🎜rrreee🎜In Der Stil In der Datei .scss gibt es: 🎜rrreee

🎜Hmm~, css ist eine magische Sache. Ich werde einen Artikel verfassen, um zu erklären sass später. Verwandter Inhalt...🎜

🎜Dann lautet der Inhalt in der javascript-Datei tooltip.component.ts wie folgt: 🎜 rrreee🎜Tooltip-Anweisungen schreiben🎜🎜Das ist der Schwerpunkt dieses Artikels. Ich werde die spezifischen Anweisungen im Code markieren~🎜 🎜Zugehörige Dateien Der Inhalt von tooltip.directive.ts lautet wie folgt: 🎜rrreee🎜An diesem Punkt ist die Funktion von 99% abgeschlossen. Jetzt können wir sie aufrufen auf der Seite. 🎜🎜Auf Seite aufrufen🎜🎜Wir fügen Folgendes zu user-list.component.html hinzu Inhalt: 🎜rrreee🎜TooltipDirective Wir haben diese Direktive auf app.module.ts deklariert, wir können sie direkt aufrufen. Der aktuelle Effekt ist wie folgt: 🎜🎜🎜🎜Der von uns implementierte tooltip ist eine unten zentrierte Anzeige, das ist das Framework, das wir normalerweise verwenden, wie zum Beispiel der tooltip im angular ant design >bottom-Attribut. Für andere Attribute können Leser bei Interesse diese erweitern. 🎜🎜Zu diesem Zeitpunkt können wir die von uns geschriebene Anweisungsdatei gut verwalten. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAngular-Lernen am Beispiel von Tooltip, um benutzerdefinierte Anweisungen zu verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!