时间戳

首页 > 解决方案 > 用angular6制作过滤管

angular - 用angular6制作过滤管

问题描述

我正在尝试在 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) {
  }
}

搜索-data.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，但这些都没有解决我的问题。

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

谢谢

标签： angulartypescript

解决方案

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

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

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

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

然后在模板中使用如下

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

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

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

推荐阅读