Fórum Angular - ngxTextHighlight #608224

18/02/2020

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.

Estou começando com angular agora, por isso, gostaria de pedir a ajuda de vocês.

Segue trecho do código:

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');}
*/
}

No typescript, eu tentei capturar outros eventos, inclui log, alerts, mas ainda assim não consegui entender. Onde o evento ocorre.

Renato Neto

Curtir tópico

+ 0

Responder

Posts

19/02/2020

Renato Neto

Eu vi alguns exemplos simples e funcionais que está me levando a acreditar que seria melhore desenvolver outra tela com tal funcionalidade, pois estou perdendo muito tempo em algo aparentemente simples!

Responder

Gostei + 0

20/02/2020

Renato Neto

Vi que é possivel compartilhar dados entre os componentes utilizando o BehaviorSubject. Alguém ja utilizou?

Responder

Gostei + 0