En artículos anteriores, hemos brindado una descripción general de Angular . En la parte de instrucciones personalizadas, hemos podido escribirlas, pero en escenarios reales todavía necesitamos una gestión estandarizada.
Angular es una versión mejorada de Angular.js. [Tutoriales relacionados recomendados: "Tutorial angular"]
Entonces, en este artículo, usaremos Tooltip para explicar el contenido de las instrucciones personalizadas.
Representaciones en línea, como sigue:
La estructura del directorio
se basa en el proyecto de código implementado en el artículo anterior. Ejecute la línea de comando:
# Ingrese a la carpeta de directivas $ cd directivas. #Crear carpeta de información sobre herramientas$ mkdir información sobre herramientas # Ingrese a la carpeta de información sobre herramientas $ cd información sobre herramientas # Crear componente de información sobre herramientas $ ng generar información sobre herramientas del componente # Crear directiva de información sobre herramientas $ ng generar información sobre herramientas de directiva
Después de ejecutar la línea de comando anterior, obtendrá la estructura del directorio de archivos de app/directive/tooltip de la siguiente manera:
información sobre herramientas ├── información sobre herramientas // componente de información sobre herramientas │ ├── user-list.component.html // esqueleto de página │ ├── user-list.component.scss // estilo único de página │ ├── user-list.component spec. .ts // Archivo de prueba │ └── user-list.component.ts // archivo javascript ├── tooltip.directive.spec.ts // Archivo de prueba └── tooltip.directive.ts // Archivo de directiva
Bueno, aquí Puse el componente al mismo nivel que tooltip , principalmente para facilitar la gestión. Por supuesto, esto varía de persona a persona, puedes ponerlo en la carpeta components públicos.
Escriba el componente de información sobre herramientas
en el archivo html :
<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div> En el archivo de estilo .scss , hay:
$black: #000000;
$blanco: #ffffff;
$tamaño del cursor: 6px;
$tooltip-bg: transparentize($black, 0.25); // transparentize es la sintaxis de sass $grid-gutter-width: 30px;
$body-bg-color: $blanco;
$ tiempo de animación de la aplicación: 200 ms;
$app-anim-curve: salida gradual;
$ radio-borde-estándar: 5px;
$zindex-max: 100;
// :selector de pseudoclase de host, establece el estilo del elemento componente en sí: host {
posición: fija;
relleno: $ancho-canal-cuadrícula/3 $ancho-canal-cuadrícula/2;
color de fondo: $tooltip-bg;
color: $cuerpo-bg-color;
opacidad: 0;
transición: todo $app-anim-time $app-anim-curve;
alineación de texto: centro;
radio-borde: $std-border-radius;
índice z: $zindex-max;
}
.caret { // ancho del cursor: 0;
altura: 0;
borde izquierdo: 6px sólido transparente;
borde derecho: 6px sólido transparente;
borde inferior: 6px sólido $tooltip-bg;
posición: absoluta;
arriba: -$tamaño de caret;
izquierda: 50%;
margen izquierdo: -$tamaño-caret/2;
color-inferior-borde: $tooltip-bg;
} Hmm~,
csses algo mágico, y prepararé un artículo para explicar el contenido relacionadosass...
Luego, el contenido del archivo javascript tooltip.component.ts es el siguiente:
import {
Componente,
ElementRef, //El elemento apunta a HostBinding,
en destruir,
Al iniciar
} de '@angular/core';
@Componente({
selector: 'app-tooltip', // Identificador, que indica cómo se llama mi componente, aquí está app-tooltip
templateUrl: './tooltip.component.html', // El esqueleto de este componente styleUrls: ['./tooltip.component.scss'] // El estilo privado de este componente})
la clase de exportación TooltipComponent implementa OnInit {
datos públicos: cualquiera; // Asigna un valor a la directiva displayTimeOut privado: cualquiera;
// El decorador relacionado con el enlace de host del propio componente @HostBinding('style.top') hostStyleTop!: string;
@HostBinding('style.left') hostStyleLeft!: cadena;
@HostBinding('style.opacity') hostStyleOpacity!: cadena;
constructor(
elemento privadoRef: ElementRef
) { }
ngOnInit(): nulo {
this.hostStyleTop = this.data.elementPosition.bottom + 'px';
si(this.displayTimeOut) {
clearTimeout(this.displayTimeOut)
}
this.displayTimeOut = setTimeout((_: cualquiera) => {
// Calcule aquí la distancia entre la información sobre herramientas y el lado izquierdo. La fórmula de cálculo aquí es: información sobre herramientas.izquierda + .ancho del elemento de destino - (información sobre herramientas.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)
}
// El componente se destruye ngOnDestroy() {
// Después de destruir el componente, borre el temporizador para evitar pérdidas de memoria if(this.displayTimeOut) {
clearTimeout(this.displayTimeOut)
}
}
} Escribir instrucciones de información sobre herramientas
es el objetivo de este artículo. Marcaré las instrucciones específicas en el código ~
El contenido del archivo relevante tooltip.directive.ts es el siguiente:
import {.
ApplicationRef, // Detección de llamadas globales ComponentFactoryResolver, // Crear objeto componente ComponentRef, // La asociación y guía de la instancia del componente, apuntando al elemento creado por ComponentFactory Directiva, ElementRef,
EmbeddedViewRef, // EmbeddedViewRef hereda de ViewRef y se utiliza para representar elementos de la interfaz de usuario definidos en elementos de plantilla.
HostListener, // Inyector de escucha de eventos DOM, // Entrada de inyección de dependencia
} de '@angular/core';
importar { TooltipComponent } desde './tooltip/tooltip.component';
@Directiva({
selector: '[appTooltip]'
})
exportar clase TooltipDirective {
@Input("appTooltip") appTooltip!: cadena;
ComponentRef privado!: ComponentRef<TooltipComponent>;
// Obtener la posición relativa del elemento de destino, como izquierda, derecha, arriba, abajo
obtener posición del elemento() {
devolver this.elementRef.nativeElement.getBoundingClientRect();
}
constructor(
elemento protegidoRef: ElementRef,
appRef protegida: ApplicationRef,
componente protegidoFactoryResolver: ComponentFactoryResolver,
inyector protegido: Inyector
) { }
//Crear información sobre herramientas
createTooltip protegido() {
this.componentRef = this.componentFactoryResolver
.resolveComponentFactory(TooltipComponent) // Vincular información sobre herramientas componente.create(this.injector);
this.componentRef.instance.data = { // Vincular contenido de datos de datos: this.appTooltip,
elemento: this.elementRef.nativeElement,
posiciónelemento: this.elementPosition
}
this.appRef.attachView(this.componentRef.hostView); //Agregar vista const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] como HTMLElement;
documento.body.appendChild(domElem);
}
// Eliminar información sobre herramientas
información sobre herramientas de destrucción protegida() {
si (este.componentRef) {
this.appRef.detachView(this.componentRef.hostView); // Elimina la vista this.componentRef.destroy();
}
}
// Escuche el movimiento del mouse en @HostListener('mouseover')
AlEntrar() {
this.createTooltip();
}
// Escucha el movimiento del mouse out@HostListener('mouseout')
Al salir() {
this.destroyTooltip();
}
} En este punto, 99% de las funciones se han completado. Ahora podemos llamarlo en la página.
En la página, nos llamamos
para agregar el siguiente contenido a user-list.component.html :
<p style="margin-top: 100px;">
<!-- [appTooltip]="'Hello Jimmy'" es el punto clave-->
<lapso
[appTooltip]="'Hola Jimmy'"
style="margin-left: 200px; ancho: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;"
>Jimmy</span>
</p> Hemos declarado la instrucción TooltipDirective en app.module.ts y podemos llamarla directamente. El efecto actual es el siguiente:
tooltip que implementamos se muestra en la parte inferior central, que es lo que usualmente usamos en el marco, como el atributo bottom de tooltip en angular ant design . Para otros atributos, si los lectores están interesados, se pueden ampliar.
En este punto, podemos mantener los archivos de instrucciones que escribimos.