Enviado em 19/02/2020 - 09:57h
Foi desenvolvido uma página onde é exibido dados referente a exames e existe uma guia de pesquisa para destacar a palavra pesquisada. Funciona conforme o esperado! No entanto ao digitar uma palavra que não existe ou apagar a palavra correta digitada anteriormente, a div onde é exibido o conteúdo, retorna ó código HTML da página. O problema é que não estou conseguindo captura o evento de digitação no input de pesquisar. É como se a ação fosse encapsulada pelo método e a página não é reindeirizada.
pesquisa.component.html
<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>
pesquisa.component.ts
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');}
*/
}
Instalar e Configurar o Slackware Linux em 2025
Como configurar os repositórios do apt no Debian 12 em 2025
Passkeys: A Evolução da Autenticação Digital
Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla
Como colorir os logs do terminal com ccze
Instalação Microsoft Edge no Linux Mint 22
Como configurar posicionamento e movimento de janelas no Lubuntu (Openbox) com atalhos de teclado
Máquinas Virtuais com IP estático acessando Internet no Virtualbox
Meus HDs não aparecem mais no boot da placa mãe (20)
Criar entrada no GRUB para uma ISO Linux (0)
Problema em instalar o PySide6 no Ubuntu 24.04 [RESOLVIDO] (3)