Angular 2.0 最终版本关于过滤器和动画结合的问题

Question

在 Angular 2 中，我正在做一个示例应用程序。应用程序在同一模块下有 2 个组件产品模块使用名为 product-list.component.ts 的组件在网格/表格中列出产品。选择产品后，视图会通过路由更改到另一个组件 - product-detail.component.ts。

在详细视图/组件中，有一个后退按钮可导航到产品列表视图/组件，单击时，列表视图正在按预期加载网格中的产品列表，以及应用默认值的过滤器。

上面的过滤器一直在工作，直到我在后退按钮上应用了动画。 动画有一个动画完成的回调处理程序（在导航到列表视图之前等待动画完成）。在动画完成时，我正在调用 router.navigate('/product')。

应用程序可以很好地从产品详细信息导航到产品列表视图/组件，但没有调用过滤器。

只有在用户与之交互时才会调用过滤器。

下面是代码 sn-ps 仅相关代码 1. Product-list.component.ts 和 Product-list.component.html

import {Component, OnInit} from '@angular/core'
import {IProduct} from "./product";
import {ProductService} from "./product.service";
import {Input, trigger, state, style, transition, animate} from "@angular/core";


@Component({
    selector: 'pm-products',
    templateUrl: 'app/products/product-list.component.html',
    styleUrls: ['app/products/product-list.component.css'],
    animations: [
        trigger('flyInOut', [
            state('in', style({transform: 'translateX(0)'})),
            transition('void => *', [
                style({transform: 'translateX(-100%)'}),
                animate(1000)
            ]),
            transition('* => void', [
                animate(1000, style({transform: 'translateX(100%)'}))
            ])
        ])
    ]

})

export class ProductListComponent implements OnInit{
    pageTitle: string = 'Product List';
    imageWidth: number = 50;
    imageMargin: number = 2;
    showImage:boolean = false;
    products: IProduct[];
    listFilter = "cart";
    errorMessage = "";
    productState = "void";

    constructor(private _productService: ProductService){
    }
    toggleImage():void{
       this.showImage = !this.showImage;
       this.productState = this.showImage ? "in": "void";
    }
    ngOnInit():void{
        console.log('Inside Init Angular Component Life cycle hook');
        // this.products = this._productService.getProduct();
        //this.listFilter = "cart";
        this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error =>this.errorMessage = <any> error);
    }
    onRatingClicked(message: string):void{
        this.pageTitle = 'Product List' + message;
    }
}

  <tbody>
                <tr *ngFor='let product of products | productFilter: listFilter'>
                    
                    <td><a [routerLink]="['/product', product?.productId]">   {{product?.productName}}</a></td>                   
                    <td>{{product?.productCode | lowercase}}</td>
                    <td>{{product?.price | currency:'INR':true:'1.2-2'}}</td>
             </tbody>

1. Product-detail.component.ts 和 Product-detail.component.html

import {Component, OnInit} from "@angular/core";

import {Input, trigger, state, style, transition, animate} from "@angular/core";
import { ActivatedRoute, Params, Router }  from "@angular/router";

@Component({
    templateUrl: 'app/products/product-detail.component.html',
    animations: [
        trigger('backButtonAnimation', [
            state('details', style({
                backgroundColor: '#eee',
                transform: 'scale(1)'
            })),
            state('list',   style({
                backgroundColor: '#FF0000',
                transform: 'scale(1.2)'
            })),
            transition('list => details', animate('100ms ease-in')),
            transition('details => list', animate('200ms ease-out'))
        ])
    ]

})

export class ProductDetailComponent implements OnInit {
    pageTitle: string = "Product Details";
    productState: string = "details";
    constructor(private _route: ActivatedRoute , private _router: Router){
    }

    ngOnInit(): void {
        this._route.params.forEach((params: Params) => {
            let id = +params['id'];
            this.pageTitle += `: ${id}`;
        });
    }
    toggleState(): void{
        if(this.productState == "list"){
            this.productState = "details"
        }else{
            this.productState = "list"
        }
    }
    onBack(): void{
        this.toggleState();
    }
    animationStarted($event):void{

    }
    animationDone($event): void{
      if($event.fromState== "void" && $event.toState== "details"){
          return;
      }
        this._router.navigate(['/products']);
    }

}

<div class="panel panel-footer">
            <a class="btn btn-default" (click)="onBack()" (@backButtonAnimation.start)='animationStarted($event)' (@backButtonAnimation.done)='animationDone($event)' [@backButtonAnimation] = "productState">
            <i class="glyphicon glyphicon-chevron-left"></i>Back
        </a>
    </div>

下面是我的自定义过滤器

    import {PipeTransform} from "@angular/core";
    import {IProduct} from "./product";
    import {Pipe} from "@angular/core";
    
    @Pipe({
        name: 'productFilter'
    })
    
    export class ProductFilterPipe implements PipeTransform{
        transform(value: IProduct[], args: string[]): IProduct[] {
            let filterby = args[0] ? args[0].toLowerCase() : null;
            return filterby ? value.filter((product: IProduct) => product.productName.toLowerCase().indexOf(filterby)!=-1) : value;
        }
    }

注意 - 代码不会在编辑器中运行，因为它现在不支持 angular 2.0

Answer 1

试试这个代码

export class ProductFilterPipe implements PipeTransform {

    transform(value: IProduct[], filterBy: string): IProduct[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
    }

}