Rohr innerhalb Kind Komponente nicht aufgerufen, wenn die Eingabe geändert

Question

Ich habe eine benutzerdefinierte Rohr, um ein Array zu filtern. Die Pipe wird in einer untergeordneten Komponente verwendet, Daten zur untergeordneten Komponente werden über Eingabeparameter übergeben. Wenn die Eingabedaten geändert werden, wird Pipe nicht aufgerufen. Gibt es irgendetwas, was ich anders machen muss, wenn ich ChangeDetectionStrategy.OnPush in der Kindkomponente verwende?

bearbeiten

Im Beispiel unten, wird Produkt-list-Container Produkte aus NGRX Speicher. Die Daten werden über Eingabeparameter an die Produktlistenkomponente übergeben.

In Produkt-Liste-Komponente, ich habe einen Filter, der zum Ausfiltern von Zeilen basierend auf einigen Kriterien ist. Das Problem, das ich sehe, ist, dass, wenn der Eingangswert ändert Rohrfunktion nicht aufgerufen wird. Pipe wird nur einmal bei Komponentenlast aufgerufen.

@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); 
    } 
} 

Danke,

Answer 1

, dass, weil die Pfeife Pure pipes ist.

Angular führt eine reine Pipe nur dann aus, wenn eine reine Änderung am Eingangswert erkannt wird. Eine reine Änderung ist entweder eine Änderung an einer primitiven Eingabe Wert (String, Zahl, Boolean, Symbol) oder eine geänderte Objektreferenz (Datum, Array, Funktion, Objekt).

Angular ignoriert Änderungen in (zusammengesetzten) Objekten. Es wird keine reine Pipe aufgerufen, wenn wir einen Eingabemonat ändern, zu einem Eingabearray hinzufügen oder eine Eingabeobjekteigenschaft aktualisieren.

Impure pipes Verwendung in Ihrem Fall:

Angular führt ein unreines Rohr während jeder Komponentenänderung Detektionszyklus. Eine unreine Pipe wird oft aufgerufen, so oft wie bei jedem Tastendruck oder jeder Mausbewegung.

Mit dieser Sorge im Hinterkopf, müssen wir ein unreines Rohr mit großen Pflege implementieren. Ein teures, lang laufendes Rohr könnte den Benutzer Erfahrung zerstören.

FilterActiveProduct:

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

Produktliste:

@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() { 
    } 
} 

Nach diesem Dokument Seite: https://angular.io/docs/ts/latest/guide/pipes.html