Question

我有一个自定义管道来过滤数组。管道在子组件内部使用，数据到子组件通过输入参数传递。更改输入数据时，不会调用管道。在子组件中使用ChangeDetectionStrategy.OnPush时，我有什么不同的做法。

修改

在下面的示例中，product-list-container从ngrx store获取产品。数据通过输入参数传递到product-list组件。

在product-list组件中，我有一个过滤器，用于根据某些条件过滤掉行。我看到的问题是，当输入值改变管道功能时不会被调用。管道只在组件负载上被调用一次。

@Component({
  selector: 'product-list-container',
  template: `
    <app-product-list [productList]="productList$ | async"></app-product-list>
  `
})
export default class ProductListContainer implements OnInit {
  public productList$: Observable<Product[]>;
  constructor(public store: Store<AppState>) {
  }
  ngOnInit() {
    this.productList$ = this.store.select('productList');
  }
}

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of productList | filterActiveProduct">
   // More code here 
    </div>
  `,
  changeDetection: changeDetectionStrategy.onPush
})
export default class ProductList {
  @Input() productList: Product[];
  constructor() {
  }
}

@Pipe({
  name: 'fromNow'
})
export class filterActiveProduct {
  transform(products: Product[], args: Array<any>): string {
    return products.findAll(p => p.isActive);
  }
}

谢谢，

Answer 1

因为你的管道是Pure pipes。

Angular仅在检测到纯粹的更改时执行纯管道   输入值。纯粹的改变是对原始输入的改变   value（String，Number，Boolean，Symbol）或更改的对象引用   （日期，数组，功能，对象）。

Angular忽略（复合）对象内的更改。它不会打电话给   如果我们更改输入月份，添加到输入数组，或者   更新输入对象属性。

在您的案例中使用Impure pipes：

Angular在每个组件更改期间执行不纯的管道   检测周期。一个不纯的管道将经常被称为   每次按键或鼠标移动。

考虑到这一点，我们必须实施一个非常不纯的管道   关心。昂贵，长时间运行的管道可能会破坏用户   经验。

FilterActiveProduct：

@Pipe({
  name: 'filterActiveProduct',
  pure: false
})
export class FilterActiveProduct {}

产品：

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of productList | filterActiveProduct">
   // More code here 
    </div>
  `,
})
export default class ProductList {
  @Input() productList: Product[];
  constructor() {
  }
}

关注此文档页面：https://angular.io/docs/ts/latest/guide/pipes.html

输入更改时未调用子组件中的管道

1 个答案: