Angular - ngxTextHighlight

rdavisp
(usa Outra)

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.

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.