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

In früheren Artikeln 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 ist eine aktualisierte Version von Angular.js. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]

In diesem Artikel verwenden wir daher Tooltip , um den Inhalt benutzerdefinierter Anweisungen zu erläutern.

Online-Renderings wie folgt:

Die Verzeichnisstruktur

basiert auf dem im vorherigen Artikel implementierten Codeprojekt. Führen Sie die Befehlszeile aus:

# Geben Sie den Direktivenordner $ cd Directives ein

#Tooltip-Ordner erstellen$ mkdir Tooltip

# Geben Sie den Tooltip-Ordner $ cd tooltip ein

# Tooltip-Komponente erstellen $ ng Komponenten-Tooltip generieren

# Tooltip-Direktive erstellen $ ng Anweisungs-Tooltip generieren

Nachdem Sie die obige Befehlszeile ausgeführt haben, erhalten Sie die Dateiverzeichnisstruktur von app/directive/tooltip wie folgt:

Tooltip
├── Tooltip // Tooltip-Komponente │ ├── user-list.component.html // Seitengerüst │ ├── user-list.component.scss // eindeutiger Seitenstil │ ├── user-list.component. spec .ts // Testdatei │ └── user-list.component.ts // Javascript-Datei ├── tooltip.directive.spec.ts // Testdatei └── tooltip.directive.ts // Direktivendatei

Nun, hier Ich habe die Komponente auf der gleichen Ebene wie tooltip platziert, hauptsächlich um die Verwaltung zu erleichtern. Dies ist natürlich von Person zu Person unterschiedlich. Sie können es im öffentlichen components ablegen.

Schreiben Sie die Tooltip-Komponente

in die html Datei:

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

In der Stildatei .scss gibt es:

$black: #000000;
$white: #ffffff;
$caret-size: 6px;
$tooltip-bg: transparentize($black, 0.25); // transparentize ist die Syntax von 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-Pseudoklassenselektor, legt den Stil für das Komponentenelement selbst fest: host {
  Position: fest;
  Polsterung: $grid-gutter-width/3 $grid-gutter-width/2;
  Hintergrundfarbe: $tooltip-bg;
  Farbe: $body-bg-color;
  Deckkraft: 0;
  Übergang: alle $app-anim-time $app-anim-curve;
  Textausrichtung: Mitte;
  Randradius: $std-Grenzradius;
  Z-Index: $zindex-max;
}

.caret { // Caret-Breite: 0;
  Höhe: 0;
  Rand links: 6 Pixel durchgehend transparent;
  Rand rechts: 6 Pixel durchgehend transparent;
  border-bottom: 6px solide $tooltip-bg;
  Position: absolut;
  oben: -$caret-size;
  links: 50 %;
  margin-left: -$caret-size/2;
  Rahmenfarbe unten: $tooltip-bg;
}

Hmm~, css ist eine magische Sache, und ich werde einen Artikel verfassen, um sass -bezogene Inhalte zu erklären ...

Dann lautet der Inhalt der javascript Datei tooltip.component.ts wie folgt:

import { 
  Komponente, 
  ElementRef, //Das Element zeigt auf HostBinding, 
  OnDestroy, 
  OnInit 
} von '@angular/core';

@Komponente({
  Selektor: 'app-tooltip', // Bezeichner, der angibt, wie meine Komponente heißt, hier ist app-tooltip
  templateUrl: './tooltip.component.html', // Das Grundgerüst dieser Komponente styleUrls: ['./tooltip.component.scss'] // Der private Stil dieser Komponente})
Die Exportklasse TooltipComponent implementiert OnInit {

  public data: any; // Der Direktive einen Wert zuweisen private displayTimeOut: any;

  // Der Dekorator, der sich auf die Hostbindung der Komponente selbst bezieht @HostBinding('style.top') hostStyleTop!: string;
  @HostBinding('style.left') hostStyleLeft!: string;
  @HostBinding('style.opacity') hostStyleOpacity!: string;

  Konstruktor(
    private elementRef: ElementRef
  ) { }

  ngOnInit(): void {
    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }

    this.displayTimeOut = setTimeout((_: any) => {
      // Berechnen Sie hier den Abstand zwischen dem Tooltip und der linken Seite. Die Berechnungsformel lautet hier: tooltip.left + .width des Zielelements - (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)
  }
  
  
  // Komponente wird zerstört ngOnDestroy() {
    // Nachdem die Komponente zerstört wurde, löschen Sie den Timer, um Speicherlecks zu verhindern if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }
  }
}

Das Schreiben von Tooltip-Anweisungen

ist der Schwerpunkt dieses Artikels. Ich werde die spezifischen Anweisungen im Code markieren. ~

Der Inhalt der relevanten Datei tooltip.directive.ts lautet wie folgt:

import { 
  ApplicationRef, // Globale Aufruferkennung ComponentFactoryResolver, // Komponentenobjekt erstellen ComponentRef, // Die Zuordnung und Führung der Komponenteninstanz, die auf das durch die ComponentFactory-Direktive erstellte Element zeigt, ElementRef, 
  EmbeddedViewRef, // EmbeddedViewRef erbt von ViewRef und wird zur Darstellung von in Vorlagenelementen definierten UI-Elementen verwendet.
  HostListener, // DOM-Ereignisüberwachungsinjektor, // Abhängigkeitsinjektionseingabe 
} von '@angular/core';

import { TooltipComponent } aus './tooltip/tooltip.component';

@Directive({
  Selektor: '[appTooltip]'
})
Exportklasse TooltipDirective {
  @Input("appTooltip") appTooltip!: string;

  private ComponentRef!: ComponentRef<TooltipComponent>;

  // Ermittelt die relative Position des Zielelements, z. B. links, rechts, oben, unten
  get elementPosition() {
    return this.elementRef.nativeElement.getBoundingClientRect(); 
  }

  Konstruktor(
    protected elementRef: ElementRef,
    geschützte AppRef: ApplicationRef,
    geschützter ComponentFactoryResolver: ComponentFactoryResolver,
    geschützter Injektor: Injektor
  ) { }

  //Tooltip erstellen
  protected createTooltip() {
    this.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // Tooltip-Komponente binden.create(this.injector);

    this.componentRef.instance.data = { // Daten binden Dateninhalt: this.appTooltip,
      Element: this.elementRef.nativeElement,
      elementPosition: this.elementPosition
    }

    this.appRef.attachView(this.componentRef.hostView); //Ansicht hinzufügen const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    document.body.appendChild(domElem);
  }
  
  // Tooltip löschen
  protected destroyTooltip() {
    if(this.componentRef) {
      this.appRef.detachView(this.componentRef.hostView); // Ansicht entfernen this.componentRef.destroy();
    }
  }
  
  // Auf Mausbewegungen in @HostListener('mouseover') achten
  OnEnter() {
    this.createTooltip();
  }
    
  // Auf Mausbewegungen achten out@HostListener('mouseout')
  OnOut() {
    this.destroyTooltip();
  }

}

Zu diesem Zeitpunkt sind 99% der Funktionen abgeschlossen. Jetzt können wir sie auf der Seite aufrufen.

Auf der Seite rufen wir

uns auf, den folgenden Inhalt zu user-list.component.html hinzuzufügen:

<p style="margin-top: 100px;">
  <!-- [appTooltip]="'Hallo Jimmy'" ist der entscheidende Punkt-->
  <span 
    [appTooltip]="'Hallo Jimmy'" 
    style="margin-left: 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;"
  >Jimmy</span>
</p>

Wir haben die TooltipDirective Anweisung in app.module.ts deklariert und können sie direkt aufrufen. Der aktuelle Effekt ist wie folgt:

tooltip wird unten in der Mitte angezeigt. Dies ist das, was wir normalerweise im Framework verwenden, z. B. das bottom Attribut tooltip im angular ant design . Für andere Attribute können Leser bei Interesse diese erweitern.

Zu diesem Zeitpunkt können wir die von uns geschriebenen Anweisungsdateien gut verwalten.