Ignite UI for Angular의 IgxTextHighlightDirective와 IgxTextHighlightService 텍스트의 일부를 강조 표시하여 대소문자 구분 검색 옵션을 제공하고 정확히 일치하는 부분만 강조 표시하는 데 사용됩니다. 이를 통해 개발자는 활성 강조 표시를 유지할 수 있으며, 이는 이미 강조 표시된 부분 중 하나일 수 있습니다.
Angular 텍스트 강조 지시문 예제
EXAMPLE
TS
HTML
SCSS
/* eslint-disable max-len */import { Component, OnDestroy, ViewChild } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from'igniteui-angular';
import { FormsModule } from'@angular/forms';
@Component({
selector: 'app-text-highlight-1',
styleUrls: ['./text-highlight-sample-1.component.scss'],
templateUrl: './text-highlight-sample-1.component.html',
imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective]
})
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
이제 Ignite UI for Angular Text Highlight 모듈이나 지시문을 가져왔으므로 igxTextHighlight를 사용할 수 있습니다.
Angular Text Highlight 지시문 사용
텍스트의 다른 부분을 강조 표시하는 데 사용할 수 있는 검색 상자를 만들어 보겠습니다. Ignite UI for Angular의 InputGroup 구성 요소를 사용하여 명확한 일치 항목, 다음 찾기, 이전 찾기 버튼, 검색에서 대소문자를 구분할지 여부를 지정하는 버튼이 있는 텍스트 입력을 추가합니다. 또한 찾은 일치 항목 수에 대한 레이블도 있습니다.
먼저 구성 요소의 .ts 파일에서 구성 요소 템플릿의 바인딩에 사용되는 다음 필드를 추가해야 합니다.
@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
그런 다음 사용자가 검색 상자에 입력한 텍스트에 강조 표시를 적용하고 활성 강조 표시를 이동할 수 있도록 다음 메서드를 추가해야 합니다.
/* eslint-disable max-len */import { Component, OnDestroy, ViewChild } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from'igniteui-angular';
import { FormsModule } from'@angular/forms';
@Component({
selector: 'app-text-highlight-1',
styleUrls: ['./text-highlight-sample-1.component.scss'],
templateUrl: './text-highlight-sample-1.component.html',
imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective]
})
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 사용하면 하나의 활성 하이라이트를 모두 공유하는 여러 요소를 검색할 수 있습니다. 이는 여러 TextHighlight 지시어에 걸쳐 동일한 groupName 값을 사용하여 수행됩니다. 샘플을 설정하기 위해 이전 샘플의 검색 상자를 재사용하지만 이번에는 두 개의 div 요소를 추가하겠습니다. column row 입력은 요소가 여러 개 있고 이 경우 두 번째 div의 행 값이 다를 때 유용합니다.
/* eslint-disable max-len */import { Component, OnDestroy, ViewChildren } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from'igniteui-angular';
import { FormsModule } from'@angular/forms';
@Component({
selector: 'app-text-highlight-2',
styleUrls: ['./text-highlight-sample-2.component.scss'],
templateUrl: './text-highlight-sample-2.component.html',
imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective]
})
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
IgxTextHighlight 지시어는 주어진 문자열의 모든 발생에 대한 색상과 배경을 변경하는 방식으로 스타일을 지정할 수 있습니다. 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
가장 간단한 접근 방식에 따라, highlight-theme 확장하고 $resting-background, $resting-color, $active-background 및 $active-color 매개변수를 허용하는 새로운 테마를 생성합니다.
/* eslint-disable max-len */import { Component, OnDestroy, ViewChild } from'@angular/core';
import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from'igniteui-angular';
import { FormsModule } from'@angular/forms';
@Component({
selector: 'app-text-highlight-style',
styleUrls: ['./text-highlight-style.component.scss'],
templateUrl: './text-highlight-style.component.html',
imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective]
})
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
GitHub