検索コンポーネントの最終的なコンパイル済みHTML

Question

私は検索サービスをセットアップしており、ユーザータイプとして検索文字列を渡しています。このテキストの最終レンダリングされたHTMLコンポーネントを検索する必要があります（非同期パイプの後、私が開発者ツールのときに見えるもの）。私はこれを文字列として設定しようとしています。私のコンポーネントでは、私は次のようしている：

import { .. ElementRef } from '@angular/core'; 

export class ReportsComponent extends HelperGizmoComponent implements OnChanges, AfterViewInit { 
    test; 
constructor(..., private el: ElementRef) { 
     super(); 
... 
} 
... 
ngAfterViewInit() { 
     this.test = this.el.nativeElement.innerHTML.toString(); 
    } 
} 

変数{{テスト}}が、私はコンポーネントのテンプレートファイルで参照プリコンパイルされたテンプレートが表示されますが、私はそれがすべてでコンパイルされた後を探しています私のhttp呼び出しなどこれを達成する方法はありますか？

Answer 1

2つの別々の関数があります。ひとつはオブジェクトを渡し、もう一つはコンポーネントで設定したサービス変数を渡します。方法は次のとおりです。

getPropertiesString(obj) { 
     this.propertiesArray = (Object as any).values(this); 
     this.propertiesArray = this.propertiesArray.filter(prop => typeof prop == 'string'); 
     this.propertiesArray = this.propertiesArray.filter(prop => !(prop.includes('col-'))); 
     return this.propertiesArray.toString(); 
    } 
    //Gets all service data values of a component for search/filter 
    getServiceStringValue(service){ 
     service.subscribe(data => data 
      .map(data => this.serviceString += (JSON.stringify(data) + "; "))); 
     return this.serviceString; 
    } 

私は検索にも関係のないいくつかのプロパティを除外しています。

ngOnChanges() { 
     this.checkterm(this.searchTerm, this.el, 'reports'); 
    }  
ngOnInit() { 
     this.propertiesString = this.getPropertiesString(this); 
     this.serviceString = this.getServiceStringValue(this.policies); 
    } 

最後に、私はこれらのプロパティに対する検索語をチェックして、それらを強調するためにmarkJSを使用します：検索ページ自体に

checkterm(term, el, component) { 
     if (term) { 
      el = el.nativeElement.querySelector('md-card-content').textContent.toLowerCase(); 
      term = this.searchTerm.toLowerCase(); 
      if (this.propertiesString !== undefined && this.serviceString !== undefined) { 
       if (this.propertiesString.toLowerCase().includes(term) || this.serviceString.toLowerCase().includes(term)) { 
        if (this.propertiesString.toLowerCase().includes(term)) { this.showProperties = true } 
        else { this.showProperties = false; }; 
        if (this.serviceString.toLowerCase().includes(term) && el) { 
         if (el.indexOf(term) == -1) { 
          this.showServiceNotice = true; 
         } 
         else { 
          this.showServiceNotice = false; 
         } 
        } 

        this.hasTerm.emit('add.' + component); 
       } 
       else { this.hasTerm.emit('remove.' + component); } 
      } 
      else { console.log('services still undefined') } 
     } 
    } 
} 

次にコンポーネントでは、私はそうのようなメソッドを呼び出しています私はアプリ全体からすべてのコンポーネントを追加した

<reports class="srchComp" (hasTerm)="termCallback($event)" [searchTerm]="searchTerm" [hidden]="returnComponents.toString().indexOf('reports') == -1 || searchTerm == '' "></reports> 

termCallbackイベントは、検索ページのTSである：

termCallback(event) { 
    this.arrayAction = event.split('.'); 
    let test = this.returnComponents.toString().indexOf(this.arrayAction[1]); 
    if (this.arrayAction[0] == 'add' && test == -1){ 
     this.returnComponents.push(this.arrayAction[1]); 
    } 
    else { 
     if (this.arrayAction[0] == 'remove' && test !== -1){ 
      this.returnComponents = this.returnComponents.filter(item => item !== this.arrayAction[1]); 
     } 
     else { } 
    } 
} 

検索サービスは、FormBuilderとvalueChanges.subscribeを使用して入力を購読する典型的な検索サービスです。

私はアプリでコンポーネント自体を検索するのは奇妙でなければならないと思いますが、これは何の反応も得られなかったからです。しかし、これは私の解決策でしたので、うまくいけば誰かに役立ちます。もし誰かがこの問題に遭遇し、他の質問があれば教えてください。