Angular - ngxTextHighlight

HTML

Angular

TypeScript

JavaScript

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
                        
Renato Neto

                    

                    
Curtidas 0

                

            

        

        

            
Respostas

        

        

             

                 

                     

                          Renato Neto
                          
Renato Neto

                     

                     
 18/02/2020

                 

                

                    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!
                

                
GOSTEI 0

             

             

                 

                     

                          Renato Neto
                          
Renato Neto

                     

                     
 18/02/2020

                 

                

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

                
GOSTEI 0

             

             

        

            POSTAR