Angular 2.0 final release過濾器和動畫合併問題

Question

在Angular 2中，我正在做一個示例應用程序。應用程序在同一模塊下有兩個組件產品模塊使用名爲product-list.component.ts的組件將產品列在網格/表中。選擇產品時，通過路由到另一個組件 - product-detail.component.ts更改視圖。

詳細信息視圖/組件有一個後退按鈕可導航到產品列表視圖/組件，當點擊時，列表視圖會按預期方式加載網格中的產品列表，以及使用默認值應用的過濾器。

上面的過濾器一直工作，直到我在後退按鈕上應用動畫。 動畫有一個完成動畫的回調處理程序（等待動畫在導航到列表視圖之前完成）。在動畫結束時，我打電話給router.navigate（'/ product'）。

應用程序從產品詳情導航到產品列表視圖/組件，但過濾器沒有被調用。

僅當用戶與其交互時調用過濾器。

下面是代碼段僅相關的代碼 1.產品-list.component.ts和產品-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>

產品-detail.component.ts和產品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; 
 
     } 
 
    }

注 - 代碼不會在編輯器中運行，因爲它不支持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; 
    } 

}