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
Adapador Wi-Fi para de funcionar depois de alguns minutos no Ubuntu (2)
Compartilhando uma ideia sobre computação quantica (9)
Preciso atribuir um terceiro IP em uma placa de rede eth0. (7)