入力が変更されたときにパイプ内の子コンポーネントが呼び出されない

Question

配列をフィルタリングするカスタムパイプがあります。パイプは子コンポーネント内で使用され、子コンポーネントへのデータは入力パラメータを介して渡されます。入力データが変更されるとパイプは呼び出されません。子コンポーネントの内部でChangeDetectionStrategy.OnPushを使用するときに、私は別のやり方で対応する必要がありますか？

編集

以下の例では、製品リストコンテナがngrxストアから製品を取得します。データは、入力パラメータを介して製品リストコンポーネントに渡されます。

商品リストコンポーネントには、いくつかの基準に基づいて行を除外するためのフィルタがあります。私が見ている問題は、入力値の変更時にパイプ関数が呼び出されないということです。パイプはコンポーネントの負荷で一度だけ呼び出されています。あなたのパイプがPure pipesあるのでこと

@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

。

角度は、入力値 の純粋な変更を検出した場合にのみ、純粋なパイプを実行します。純粋な変更は、プリミティブ入力 の値（String、Number、Boolean、Symbol）または変更されたオブジェクト参照 （日付、配列、関数、オブジェクト）への変更です。

角度は（複合）オブジェクト内の変更を無視します。入力月を変更したり、入力配列に追加したり、入力オブジェクトプロパティを 更新すると、 純粋パイプと呼ばれることはありません。あなたのケースでImpure pipesを使用して

：

角度は、すべてのコンポーネントの変更 検出サイクル中に不純なパイプを実行します。汚れたパイプは、キーストロークやマウスの移動のたびに と呼ばれることがあります。

念頭に置いて、 の注意が必要な不純なパイプを実装する必要があります。高価で長時間稼働していたパイプは、ユーザーを壊す可能性があります。

FilterActiveProduct：

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

はProductList：この文書のページに続き

@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