角度4 - プログラムによる値変更でパイプをトリガーする方法（キーボードイベントなし）

Question

これは私の最初のangualrプロジェクトです。要素クリックの入力値を更新しています。この値が変更されたときにフィルタリングパイプをトリガーしたいと思います。パイプをトリガーするロジックは命令にあります。これは可能ですか？ defaulにより

コンポーネント

<input id="filter-careers" placeholder="type your title here" type="text" [(ngModel)]="term" value=""> 

<div class="vacancy {{vacancy.department}}" *ngFor="let vacancy of vacancies | filter:term" 
     (click)="openModalContent(vacancy.description, vacancy.positionTitle, vacancy.department, vacancy.link)"> 
     <p>{{vacancy.positionTitle }}</p> 
    </div> 

二成分

<div class="department" *ngFor="let department of departments" appDepartmentsDirective [departmentName]="department.name" > 

     <div class="icon" [ngStyle]="{background: 'url(' + '../../assets/' + department.link + '.png' + ') center center no-repeat'}"> 
     <img src="../../assets/{{department.link}}.svg" /> 
     </div> 
    </div> 

指令

import { Directive, HostListener, Input } from '@angular/core'; 

@Directive({ 
    selector: '[appDepartmentsDirective]' 
}) 

export class DepartmentsDirectiveDirective { 

    @Input() departmentName:string; 

    constructor() { } 



    @HostListener('click') click() { 
    console.log('department name: ' + this.departmentName); 
    if((<HTMLInputElement>document.getElementById('filter-careers'))){ 
     console.log('do something here to trigger the filtering'); 

     (<HTMLInputElement>document.getElementById('filter-careers')).value = this.departmentName; 
     (<HTMLInputElement>document.getElementById('filter-careers')).focus(); 

    } 
    else{ 
     console.log('do something else'); 
    } 

    } 

} 

Answer 1

tの場合、渡された値またはパラメータが変更された場合にのみパイプが再実行されます。 1つまたは複数のパラメータがオブジェクトである場合、異なるオブジェクトインスタンスのみが変更として認識され、配列からの値の追加/削除やオブジェクトのプロパティの変更は認識されません。

パイプを不純にすると、変更検出が実行されるたびにパイプが実行されます。これは重大なパフォーマンスの問題を引き起こす可能性があります

簡単なトリックは、これは良いと意志であるdummy

dummy:number = 0; 

someHandler() { 
    this.vacancies.push(someValue); 
    this.dummy++; 
}