Dans les articles précédents, nous avons donné un aperçu d' 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 est une version améliorée d'Angular.js. [Tutoriels associés recommandés : "Tutoriel Angular"]
Ainsi, dans cet article, nous utiliserons Tooltip pour expliquer le contenu des instructions personnalisées.
Rendus en ligne, comme suit :
La structure des répertoires
est basée sur le projet de code implémenté dans l'article précédent Exécutez la ligne de commande :
# Entrez le dossier des directives $ cd directives. #Créer un dossier d'info-bulle$ mkdir info-bulle # Entrez le dossier d'info-bulle $ cd tooltip # Créer un composant d'info-bulle $ ng générer une info-bulle de composant # Créer une directive d'info-bulle $ ng générer une directive outil-bulle
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 :
tooltip ├── info-bulle // composant d'info-bulle │ ├── user-list.component.html // squelette de page │ ├── user-list.component.scss // style unique de la page │ ├── user-list.component spec. .ts // Fichier de test │ └── user-list.component.ts // fichier javascript ├── tooltip.directive.spec.ts // Fichier de test └── tooltip.directive.ts // Fichier de directive
Eh bien, ici J'ai mis le composant au même niveau que tooltip , principalement pour faciliter la gestion. Bien sûr, cela varie d'une personne à l'autre, vous pouvez le mettre dans le dossier components publics.
Écrivez le composant info-bulle
dans le fichier html :
<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div> Dans le fichier de style .scss , il y a :
$black : #000000;
$blanc : #ffffff ;
$caret-size : 6px ;
$tooltip-bg: transparentize($black, 0.25); // transparentize est la syntaxe de sass $grid-gutter-width: 30px;
$body-bg-color : $blanc ;
$app-anim-time : 200 ms ;
$app-anim-curve : facilité de sortie ;
$std-border-radius : 5px ;
$zindex-max : 100 ;
// :host sélecteur de pseudo-classe, définit le style de l'élément composant lui-même : host {
poste : fixe ;
remplissage : $grid-gutter-width/3 $grid-gutter-width/2 ;
couleur d'arrière-plan : $tooltip-bg ;
couleur : $body-bg-color ;
opacité : 0 ;
transition : tous les $app-anim-time $app-anim-curve ;
alignement du texte : centre ;
rayon-bordure : $std-border-radius ;
z-index : $zindex-max ;
}
.caret { // largeur du curseur : 0 ;
hauteur : 0 ;
bordure gauche : 6px solide transparent ;
bordure droite : 6px solide transparent ;
bordure inférieure : 6 px solide $tooltip-bg ;
position : absolue ;
haut : -$caret-size ;
gauche : 50 % ;
marge gauche : -$caret-size/2 ;
couleur de la bordure inférieure : $tooltip-bg ;
} Hmm~,
cssest une chose magique, et je vais organiser un article pour expliquer le contenu liésass...
Ensuite, le contenu du fichier javascript tooltip.component.ts est le suivant :
import {
Composant,
ElementRef, //L'élément pointe vers HostBinding,
SurDestroy,
À l'initialisation
} de '@angular/core';
@Composant({
sélecteur : 'app-tooltip', // Identifiant, indiquant le nom de mon composant, voici app-tooltip
templateUrl : './tooltip.component.html', // Le squelette de ce composant styleUrls : ['./tooltip.component.scss'] // Le style privé de ce composant})
classe d'exportation TooltipComponent implémente OnInit {
public data: any; // Attribue une valeur à la directive private displayTimeOut: any;
// Le décorateur lié à la liaison hôte du composant lui-même @HostBinding('style.top') hostStyleTop!: string;
@HostBinding('style.left') hostStyleLeft!: string;
@HostBinding('style.opacity') hostStyleOpacity!: string;
constructeur(
elementRef privé : ElementRef
) { }
ngOnInit() : vide {
this.hostStyleTop = this.data.elementPosition.bottom + 'px';
si(this.displayTimeOut) {
clearTimeout(this.displayTimeOut)
}
this.displayTimeOut = setTimeout((_ : any) => {
// Calculez ici la distance entre l'info-bulle et le côté gauche. La formule de calcul ici est : tooltip.left + .width de l'élément cible - (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)
}
// Le composant est détruit ngOnDestroy() {
// Une fois le composant détruit, effacez le minuteur pour éviter les fuites de mémoire if(this.displayTimeOut) {
clearTimeout(this.displayTimeOut)
}
}
} L'écriture d'instructions d'info-bulle
est au centre de cet article. Je marquerai les instructions spécifiques sur le code ~
Le contenu du fichier tooltip.directive.ts correspondant est le suivant :
import {
ApplicationRef, // Détection globale des appels ComponentFactoryResolver, // Créer un objet composant ComponentRef, // L'association et le guidage de l'instance de composant, pointant vers l'élément créé par la directive ComponentFactory, ElementRef,
EmbeddedViewRef, // EmbeddedViewRef hérite de ViewRef et est utilisé pour représenter les éléments d'interface utilisateur définis dans les éléments de modèle.
HostListener, // Injecteur d'écoute d'événements DOM, // Entrée d'injection de dépendances
} de '@angular/core';
importer { TooltipComponent } depuis './tooltip/tooltip.component' ;
@Directif({
sélecteur : '[appTooltip]'
})
classe d'exportation TooltipDirective {
@Input("appTooltip") appTooltip!: chaîne;
composantRef privé ! : ComponentRef<TooltipComponent> ;
// Obtenez la position relative de l'élément cible, telle que gauche, droite, haut, bas
obtenir elementPosition() {
return this.elementRef.nativeElement.getBoundingClientRect();
}
constructeur(
elementRef protégé : ElementRef,
appRef protégé : ApplicationRef,
ComponentFactoryResolver protégé : ComponentFactoryResolver,
injecteur protégé : Injecteur
) { }
//Créer une info-bulle
protégé createTooltip() {
this.componentRef = this.componentFactoryResolver
.resolveComponentFactory(TooltipComponent) // Lier l'info-bulle composant.create(this.injector);
this.componentRef.instance.data = { // Lier le contenu des données : this.appTooltip,
élément : this.elementRef.nativeElement,
elementPosition : this.elementPosition
}
this.appRef.attachView(this.componentRef.hostView); //Ajouter une vue const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement ;
document.body.appendChild(domElem);
}
// Supprimer l'info-bulle
protégé destroyTooltip() {
si (this.componentRef) {
this.appRef.detachView(this.componentRef.hostView); // Supprime la vue this.componentRef.destroy();
}
}
// Écoutez les mouvements de la souris dans @HostListener('mouseover')
SurEntrée() {
this.createTooltip();
}
// Écoutez les mouvements de la souris out@HostListener('mouseout')
OnOut() {
this.destroyTooltip();
}
} À ce stade, 99% des fonctions ont été complétées. Nous pouvons maintenant l'appeler sur la page.
Sur la page, nous
nous appelons pour ajouter le contenu suivant à user-list.component.html :
<p style="margin-top: 100px;">
<!-- [appTooltip]="'Bonjour Jimmy'" est le point clé-->
<durée
[appTooltip]="'Bonjour Jimmy'"
style="margin-left : 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;"
>Jimmy</span>
</p> Nous avons déclaré l'instruction TooltipDirective sur app.module.ts , et nous pouvons l'appeler directement. L'effet actuel est le suivant :
tooltip que nous avons implémentée est affichée en bas au centre, ce que nous utilisons habituellement dans le framework, comme l'attribut bottom de tooltip dans angular ant design fourmis. Pour les autres attributs, si les lecteurs sont intéressés, ils peuvent être développés.
À ce stade, nous pouvons très bien conserver les fichiers d’instructions que nous avons écrits.