javascript - Angular 4 - 如何让管道触发编程值更改(无键盘事件)

Question

这是我的第一个 angualr 项目。我正在更新元素点击的输入值。当这个值改变时，我想触发过滤管道。触发管道的逻辑在指令中。这可能吗？

组件

<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

默认情况下，管道只有在传递的值或参数发生变化时才会重新执行。如果值或参数是对象，则只有不同的对象实例被识别为更改，不会识别从数组中添加/删除值或修改对象的属性。

如果您使管道不纯，每次运行更改检测时都会执行它。这可能会导致严重的性能问题。

一个简单的技巧是将额外的参数传递给管道

*ngFor="let vacancy of vacancies | filter:term:dummy"

并且每次你想要重新执行管道时，修改dummy

dummy:number = 0;

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