Fórum Evento de teclado na guia pesquisar #608217
17/02/2020
0
Tentei debugar pela ferramenta de desenvolvedor, inclui consoles e alerts para encontrar o evento de digitação da caixa de pesquisa, porém não encontrei. Parece que isto é feito de maneira assincrona encapsulado pelo componente que não dispara um evento e nem reinderiza a pagina. Dessa forma não consigo tratar.
Estou começando em angular agora e não sei como resolver isso. Será que poderiam me ajudar, por favor?
Renato Neto
Curtir tópico
+ 0Posts
18/02/2020
Kleber Santos
Talvez o onBlur possa ser útil para o teu caso, segue a documentação:
https://angular.io/guide/user-input#on-blur
Gostei + 0
18/02/2020
Renato Neto
Talvez o onBlur possa ser útil para o teu caso, segue a documentação:
https://angular.io/guide/user-input#on-blur
Obrigado pelo retorno Kleber,
Testei outros eventos e métodos, de fato o onBlur é acionado ao colocar o evento dentro do input, mas não necessariamente deveria ocorrer quando se perde o foco. Talvez se eu fizer uma gambi, se após apagar o conteúdo eu tiro o foco do elemento.
Segue trecho do código:
import { Component, OnInit, Input, OnChanges, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
import { stringify } from 'querystring';
@Component({
selector: 'ig-pesquisa',
templateUrl: './pesquisa.component.html',
styleUrls: ['./pesquisa.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PesquisaComponent implements OnInit, OnChanges
{
@ViewChild('dataContainer') dataContainer: ElementRef;
ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
const txtidpesquisa = (<HTMLSelectElement>document.getElementById('pesquisa')).value;
//console.log('idpesquisa: ' + idpesquisa);
//debugger ;
//console.log(changes);
//alert('txtidpesquisa: ' + txtidpesquisa);
console.log('RDN - 0: ngOnChanges -> pesquisa.component.ts');
this.html = this.actualText;
console.log('RDN: - 0.1: ngOnChanges -> ' + this.html)
this.dataContainer.nativeElement.innerHTML = this.html;
const divConteudo = document.getElementById('divConteudo');
divConteudo.innerHTML = this.actualText;
console.log('RDN - 1: ngOnChanges -> pesquisa.component.ts');
}
constructor(){
console.log('RDN - 3: ngOnChanges -> pesquisa.component.ts');
}
@Input() html:string;
@Input() actualText ='';
@Input() conteudo: string;
@Input() searchText: string;
ngOnInit() {
console.log('RDN - 2: ngOnInit -> pesquisa.component.ts' + this.actualText);
//alert('Botão clicado!');
}
teste() {
alert('teste');
}
/*
ngAfterContentInit(){alert('ngAfterContentInit');}
ngAfterContentChecked(){alert('ngAfterContentChecked');}
ngAfterViewInit(){alert('ngAfterViewInit');}
ngAfterViewChecked(){alert('ngAfterViewChecked');}
ngonDestroy(){alert('ngonDestroy');}
*/
}
<input class="form-control mr-sm-2"
type="text"
name="search"
placeholder="Pesquisar"
aria-label="Search"
value="Highlight" [(ngModel)]="searchText"
id="pesquisa"
>
<div #dataContainer
id="divConteudo"
ngxTextHighlight [content]=html
[searchTerm]="searchText"
[caseSensitive]="false">
</div>
Eu ainda tentei, colocar alguns logs e alerts mas não consegui identificar o momento em que é substituido o conteúdo da div que exibe os dados
Gostei + 0
18/02/2020
Kleber Santos
Tente procurar nas documentações, pelo que entendi ele está manipulando o DOM.
Segue abaixo algumas documentações que podem te ajudar:
https://github.com/mraghuram3/ngx-text-highlight/issues/1
https://mraghuram3.github.io/#/ngx-text-highlight
https://github.com/mmounirf/ngx-text-highlighter
Procure na busca do GitHub por trechos de código, eu particularmente sempre acho algum projeto publico para servir de exemplo.
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)