Descripción general de la directiva de resaltado de texto Angular
Los IgxTextHighlightDirective y IgxTextHighlightService en Ignite UI for Angular se utilizan para resaltar partes de un texto, proporcionando opciones para búsquedas que distinguen entre mayúsculas y minúsculas y para resaltar solo coincidencias exactas. Permiten al desarrollador mantener un resaltado activo, que puede ser cualquiera de las partes ya resaltadas.
Ejemplo de directiva de resaltado de texto Angular
/* eslint-disable max-len */import { Component, OnDestroy, ViewChild } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService } from'igniteui-angular';
@Component({
selector: 'app-text-highlight-1',
styleUrls: ['./text-highlight-sample-1.component.scss'],
templateUrl: './text-highlight-sample-1.component.html'
})
exportclassTextHighlightSample1ComponentimplementsOnDestroy{
@ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
public highlight: IgxTextHighlightDirective;
// tslint:disable max-line-lengthpublic html = `
Use the search box to search for a certain string in this text.
All the results will be highlighted in the same color with the exception of the
the first occurrence of the string, which will have a different color in order to tell it apart.
You can use the button in the searchbox to specify if the search will be case sensitive.
You can move the active highlight by either pressing the buttons on the searchbox or by using the Enter or the arrow keys on your keyboard.
`;
// tslint:enable max-line-lengthpublic searchText = '';
public matchCount = 0;
public caseSensitive = false;
public index = 0;
constructor(private highlightService: IgxTextHighlightService) { }
publicngOnDestroy() {
this.highlightService.destroyGroup('group1');
}
publicsearchKeyDown(ev) {
if (this.searchText) {
if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
ev.preventDefault();
this.findNext();
} elseif (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
ev.preventDefault();
this.findPrev();
}
}
}
publiconTextboxChange() {
this.index = 0;
this.find(0);
}
publicupdateSearch() {
this.caseSensitive = !this.caseSensitive;
this.find(0);
}
publicclearSearch() {
this.searchText = '';
this.find(0);
}
publicgetcanMoveHighlight() {
returnthis.matchCount > 1;
}
publicfindNext() {
this.find(1);
}
publicfindPrev() {
this.find(-1);
}
privatefind(increment: number) {
if (this.searchText) {
this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive);
this.index += increment;
this.index = this.index < 0 ? this.matchCount - 1 : this.index;
this.index = this.index > this.matchCount - 1 ? 0 : this.index;
if (this.matchCount) {
this.highlightService.setActiveHighlight('group1', {
index: this.index
});
}
} else {
this.highlight.clearHighlight();
}
}
}
ts
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Para comenzar con la directiva Ignite UI for Angular Text Highlight, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxTextHighlightModule en su archivo app.module.ts.
Ahora que tiene importado el módulo o la directiva Ignite UI for Angular Text Salt, puede comenzar a usar el igxTextHighlight.
Uso de la directiva de resaltado de texto Angular
Creemos un cuadro de búsqueda que podamos usar para resaltar diferentes partes del texto. Usaremos Ignite UI for Angular Grupo de entrada componente en el que agregaremos una entrada de texto con botones para borrar coincidencias, buscar siguiente, buscar anterior y un botón para especificar si la búsqueda distinguirá entre mayúsculas y minúsculas o no. También tiene una etiqueta que indica cuántas coincidencias hemos encontrado.
Luego, agregaremos un div con texto y la directiva IgxTextHighlight. Tenga en cuenta que, dado que necesitamos vincular la entrada del valor al texto en el div, también usaremos la interpolación para el texto del div.
En el archivo .ts de nuestro componente, primero debemos agregar los siguientes campos, que se utilizan para los enlaces en la plantilla de nuestro componente:
@Component({
...
})
exportclassHomeComponent{
public html = '...';
@ViewChild(IgxTextHighlightDirective, {read: IgxTextHighlightDirective})
public highlight: IgxTextHighlightDirective;
public searchText: string = '';
public matchCount: number = 0;
public caseSensitive: boolean = false;
public index: number = 0;
publicgetcanMoveHighlight() {
returnthis.matchCount > 1;
}
}
typescript
Luego, debemos agregar los siguientes métodos que permitirán al usuario aplicar resaltados al texto que ha escrito en el cuadro de búsqueda y mover el resaltado activo.
/* eslint-disable max-len */import { Component, OnDestroy, ViewChild } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService } from'igniteui-angular';
@Component({
selector: 'app-text-highlight-1',
styleUrls: ['./text-highlight-sample-1.component.scss'],
templateUrl: './text-highlight-sample-1.component.html'
})
exportclassTextHighlightSample1ComponentimplementsOnDestroy{
@ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
public highlight: IgxTextHighlightDirective;
// tslint:disable max-line-lengthpublic html = `
Use the search box to search for a certain string in this text.
All the results will be highlighted in the same color with the exception of the
the first occurrence of the string, which will have a different color in order to tell it apart.
You can use the button in the searchbox to specify if the search will be case sensitive.
You can move the active highlight by either pressing the buttons on the searchbox or by using the Enter or the arrow keys on your keyboard.
`;
// tslint:enable max-line-lengthpublic searchText = '';
public matchCount = 0;
public caseSensitive = false;
public index = 0;
constructor(private highlightService: IgxTextHighlightService) { }
publicngOnDestroy() {
this.highlightService.destroyGroup('group1');
}
publicsearchKeyDown(ev) {
if (this.searchText) {
if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
ev.preventDefault();
this.findNext();
} elseif (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
ev.preventDefault();
this.findPrev();
}
}
}
publiconTextboxChange() {
this.index = 0;
this.find(0);
}
publicupdateSearch() {
this.caseSensitive = !this.caseSensitive;
this.find(0);
}
publicclearSearch() {
this.searchText = '';
this.find(0);
}
publicgetcanMoveHighlight() {
returnthis.matchCount > 1;
}
publicfindNext() {
this.find(1);
}
publicfindPrev() {
this.find(-1);
}
privatefind(increment: number) {
if (this.searchText) {
this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive);
this.index += increment;
this.index = this.index < 0 ? this.matchCount - 1 : this.index;
this.index = this.index > this.matchCount - 1 ? 0 : this.index;
if (this.matchCount) {
this.highlightService.setActiveHighlight('group1', {
index: this.index
});
}
} else {
this.highlight.clearHighlight();
}
}
}
ts
igxTextHighlight le permite buscar en múltiples elementos que comparten un resaltado activo. Esto se hace teniendo el mismo valor groupName en varias directivas TextHighlight. Para configurar el ejemplo reutilizaremos el cuadro de búsqueda del ejemplo anterior, pero esta vez agregaremos dos elementos div. Las entradas column y row son útiles cuando tienes varios elementos y, en nuestro caso, el segundo div tiene un valor de fila diferente.
En el archivo .ts tenemos los campos firstParagraph y secondParagraph, que están vinculados a las respectivas entradas de valor de las directivas de resaltado de texto. Además, ahora usaremos ViewChildren en lugar de ViewChild para obtener todos los aspectos destacados de nuestra plantilla.
public firstParagraph = "...";
public secondParagraph = "...";
@ViewChildren(IgxTextHighlightDirective)
public highlights;
typescript
Todo el resto del código en el archivo .ts es idéntico al ejemplo de elemento único con la excepción del método de búsqueda. Los cambios en este método son necesarios ya que ahora tenemos varios elementos, pero el código allí se puede usar independientemente de la cantidad de directivas TextHighlight que tenga en su página.
/* eslint-disable max-len */import { Component, OnDestroy, ViewChildren } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService } from'igniteui-angular';
@Component({
selector: 'app-text-highlight-2',
styleUrls: ['./text-highlight-sample-2.component.scss'],
templateUrl: './text-highlight-sample-2.component.html'
})
exportclassTextHighlightSample2ComponentimplementsOnDestroy{
@ViewChildren(IgxTextHighlightDirective)
public highlights;
// tslint:disable max-line-lengthpublic firstParagraph = `
Use the search box to search for a certain string in this text.
All the results will be highlighted in the same color with the exception of the
the first occurrence of the string, which will have a different color in order to tell it apart.
You can use the button in the searchbox to specify if the search will be case sensitive.
You can move the active highlight by either pressing the buttons on the searchbox or by using the Enter or the arrow keys on your keyboard.
`;
public secondParagraph = `
On top of the functionality from the previous sample, this sample demonstrates how to implement the text highlight directive
with several different elements. In this case, we have two div elements, each containing some text. You can see that
they share the same active highlight and the returned match count includes both elements. The find method in this
sample can be reused regardless of the number of elements you have in your application.
`;
public searchText = '';
public matchCount = 0;
public caseSensitive = false;
public index = 0;
constructor(private highlightService: IgxTextHighlightService) { }
publicngOnDestroy() {
this.highlightService.destroyGroup('group1');
}
publicsearchKeyDown(ev) {
if (this.searchText) {
if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
ev.preventDefault();
this.findNext();
} elseif (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
ev.preventDefault();
this.findPrev();
}
}
}
publiconTextboxChange() {
this.index = 0;
this.find(0);
}
publicupdateSearch() {
this.caseSensitive = !this.caseSensitive;
this.find(0);
}
publicclearSearch() {
this.searchText = '';
this.find(0);
}
publicgetcanMoveHighlight() {
returnthis.matchCount > 1;
}
publicfindNext() {
this.find(1);
}
publicfindPrev() {
this.find(-1);
}
privatefind(increment: number) {
if (this.searchText) {
let count = 0;
const matchesArray = [];
this.highlights.forEach((h) => {
count += h.highlight(this.searchText, this.caseSensitive);
matchesArray.push(count);
});
this.matchCount = count;
this.index += increment;
this.index = this.index < 0 ? this.matchCount - 1 : this.index;
this.index = this.index > this.matchCount - 1 ? 0 : this.index;
if (this.matchCount) {
let row;
for (let i = 0; i < matchesArray.length; i++) {
if (this.index < matchesArray[i]) {
row = i;
break;
}
}
const actualIndex = row === 0 ? this.index : this.index - matchesArray[row - 1];
this.highlightService.setActiveHighlight('group1', { index: actualIndex, row });
}
} else {
this.highlights.forEach((h) => {
h.clearHighlight();
});
this.matchCount = 0;
}
}
}
ts
A la directiva IgxTextHighlight se le puede aplicar estilo en términos de cambiar el color y el fondo de todas las apariciones de la cadena dada. Para comenzar, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el highlight-theme y acepta los parámetros $resting-background, $resting-color, $active-background y $active-color.
Los parámetros $resting-background y $resting-color se aplicarán a todas las ocurrencias resaltadas, excepto a la cadena resaltada activa, cuyo estilo se diseñará según los parámetros $active-background y $active-color.
Si el componente usa un Emulated ViewEncapsulation, es necesario usar penetrate esta encapsulación::ng-deep para aplicar los estilos.
Estilos personalizados
Digamos que queremos proporcionar un estilo aún más rico a nuestras partes de texto resaltadas. Para hacer esto, podemos aprovechar las entradas cssClass y activeCssClass de la directiva IgxTextHighlight. ¡Podemos combinar estas clases con los estilos del highlight-theme y brindar una experiencia increíble a nuestros usuarios!
Todo lo que tenemos que hacer es crear un par de clases CSS con algunas propiedades y adjuntarlas usando las entradas anteriores:
/* eslint-disable max-len */import { Component, OnDestroy, ViewChild } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService } from'igniteui-angular';
@Component({
selector: 'app-text-highlight-style',
styleUrls: ['./text-highlight-style.component.scss'],
templateUrl: './text-highlight-style.component.html'
})
exportclassTextHighlightStyleComponentimplementsOnDestroy{
@ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
public highlight: IgxTextHighlightDirective;
public html = `
Use the search box to search for a certain string in this text.
All the results will be highlighted in the same color with the exception of the
the first occurrence of the string, which will have a different color in order to tell it apart.
You can use the button in the searchbox to specify if the search will be case sensitive.
You can move the active highlight by either pressing the buttons on the searchbox or by using the Enter or the arrow keys on your keyboard.
`;
public searchText = '';
public matchCount = 0;
public caseSensitive = false;
public index = 0;
constructor(private highlightService: IgxTextHighlightService) { }
publicngOnDestroy() {
this.highlightService.destroyGroup('group1');
}
publicsearchKeyDown(ev) {
if (this.searchText) {
if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
ev.preventDefault();
this.findNext();
} elseif (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
ev.preventDefault();
this.findPrev();
}
}
}
publiconTextboxChange() {
this.index = 0;
this.find(0);
}
publicupdateSearch() {
this.caseSensitive = !this.caseSensitive;
this.find(0);
}
publicclearSearch() {
this.searchText = '';
this.find(0);
}
publicgetcanMoveHighlight() {
returnthis.matchCount > 1;
}
publicfindNext() {
this.find(1);
}
publicfindPrev() {
this.find(-1);
}
privatefind(increment: number) {
if (this.searchText) {
this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive);
this.index += increment;
this.index = this.index < 0 ? this.matchCount - 1 : this.index;
this.index = this.index > this.matchCount - 1 ? 0 : this.index;
if (this.matchCount) {
this.highlightService.setActiveHighlight('group1', {
index: this.index
});
}
} else {
this.highlight.clearHighlight();
}
}
}
ts