用angular6制作过滤管

Question

我正在尝试在 angular6 中制作过滤管。到目前为止，我得到了这个：

search.component.html：

<input class="form-control" [(ngModel)]="searchService.query.title" name="title">

search.component.ts：

import { Component, OnInit } from '@angular/core';
import { SearchDataService } from './search-data.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {

  constructor(public searchService: SearchDataService) {
  }
}

搜索数据.service.ts：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SearchDataService {
  public query = {};
  constructor() { }
}

list.component.html:

<app-search></app-search>
<div>{{ searchService.query | json }}</div>
<div *ngIf="estates">
  <div *ngFor="let estate of estates | filter: searchService.query">
    <app-estates-estate [estate]="estate" [appClassSwitch]="'estate-details-list'"></app-estates-estate>
  </div>
</div>

如果我将所有这些更改为仅添加一个按钮以应用过滤器（将值从输入分配给服务模型），效果会很好。但是，如果我按照此处显示的方式进行操作，它不会刷新应用了过滤器的列表。我记得在 angularjs 中有类似 $rootScope.$digest 的东西，所以我尝试搜索类似的东西，然后找到了 ApplicationRef 和 ChangeDetectorRef，但这些都没有解决我的问题。

那么问题是如何强制执行过滤器应用程序以影响屏幕上显示的列表？

谢谢

Answer 1

Angular 2+ 没有像 angularjs 那样的默认过滤器。您应该创建自己的过滤器（角度为 2+ 的管道）。请参考以下代码sn-p

...
@pipe({
   name: "myCustomFilter",
   pure: false
})
export class MyCustomFilter implements PipeTransform {
   transform(input) {
      // Custom Logic 
      return output
    }
 }

Angular 仅在任何输入更改时才执行纯管道...默认情况下，所有管道都是纯管道...您应该将其标记为 false...但这确实会带来性能成本...请务必采取关心

...
@NgModule({
  imports: [CommonModule],
  declaration: [MyCustomFilter]
})
export class SomeModule {}

然后在模板中使用如下

<div *ngFor="let item of items | myCustomFilter: 'searchQuery'"> 
   {{item.name}}
</div>

有关管道的更多信息，请验证此Angular.io

你可以参考这个有很多可重复使用管道的 repo angular-pipes