相同組件之間的角度4動畫

Question

我對使用相同組件路徑的動畫有問題。例如。我有這樣的路線：

{路徑： '產品/分類/：類'，成分：CategoryComponent}，

首先我解決了一個問題，路線PARAMS，因爲他們無法刷新ngOnit（）功能，當我在相同的組件之間導航。但是現在我已經將動畫添加到了我的應用程序中，並且如果從HomeComponent轉到CategoryComponent，則完美無瑕。但是，如果我從不同的參數從CategoryComponent到CategoryComponent，動畫不起作用。

這裏我的動畫文件：

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core'; 

// Component transition animations 
export const slideInDownAnimation: AnimationEntryMetadata = 
    trigger('routeAnimation', [ 
    state('*', 
     style({ 
     opacity: 1, 
     transform: 'translateX(0)' 
     }) 
    ), 
    transition(':enter', [ 
     style({ 
     opacity: 0, 
     transform: 'translateX(-100%)' 
     }), 
     animate('0.5s ease-in') 
    ]), 
    transition(':leave', [ 
     animate('0.5s ease-out', style({ 
     opacity: 0, 
     transform: 'translateY(100%)' 
     })) 
    ]) 
    ]); 

在這裏，我CategoryComponent.ts

import { Component, OnInit, EventEmitter,Input, Output,HostBinding} from '@angular/core'; 
import { Pipe, PipeTransform } from '@angular/core'; 

import {FirebaseService} from '../../services/firebase.service'; 
import { AngularFireDatabase, FirebaseListObservable,FirebaseObjectObservable} from 'angularfire2/database'; 
import {Router, ActivatedRoute, Params,ParamMap} from '@angular/router'; 
import * as firebase from 'firebase'; 
import { Observable } from 'rxjs'; 
import {Subject} from 'rxjs'; 
import { routerTransition } from '../../router.animations'; 
import { slideInDownAnimation } from '../../animations'; 

import { FlashMessagesService } from 'angular2-flash-messages'; 
@Component({ 
    host: { 
    '[@routeAnimation]': 'true' 
    }, 
    selector: 'app-category', 
    templateUrl: './category.component.html', 
    styleUrls: ['./category.component.css'], 
    animations: [ slideInDownAnimation ] 
}) 
export class CategoryComponent implements OnInit { 
    @HostBinding('@routeAnimation') routeAnimation = true; 
    @HostBinding('style.display') display = 'block'; 
    @HostBinding('style.position') position = 'absolute'; 
    products:any; 
    search:any; 
    imageUrls:any = []; 
    imgSelected: any; 
    counter:any; 
    image:any; 
    images:any; 
    myimage:any; 
    count:any; 
    sub:any; 
    i:any; 
    category:any; 
    fakeimage:any; 
    constructor(
    private firebaseService: FirebaseService, 
    private router:Router, 
    public af:AngularFireDatabase, 
    private route:ActivatedRoute,  
    private flashMessage:FlashMessagesService) { 


    } 

ngOnInit() { 

    this.counter = 0; 

    var params; 
    this.sub = this.route.paramMap 
     .switchMap((params: ParamMap) => 
     this.firebaseService.getProductsByCategory(params.get('category'))).subscribe(products => { 
     this.products = products; 
     this.count = products.length; 
    });; 


} 

    returnImage(key,url){ 
    this.imageUrls.push(new ImageUrl(key,url)); 
    } 
    searchProps(){  
    this.firebaseService.getProductsByTitle(this.search.toLowerCase()).subscribe(products => { 
     this.products = products; 
    }); 
    } 

getProductsByTitle(title){ 
    console.log('here');  
    this.firebaseService.getProductsByTitle(title.toLowerCase()).subscribe(products => { 
     this.products = products; 
    }); 

} 
getImageUrl(prodid) { 
     // Go call api to get poster. 
     var data = ''; 
     var that = this; 
     this.firebaseService.getProductImages(prodid).subscribe(images => { 
      this.image = images[0]; 
      var img = this.image; 
      if(this.image != null){ 
      let storageRef = firebase.storage().ref(); 
      let spaceRef = storageRef.child(this.image.path); 
      storageRef.child(img.path).getDownloadURL().then(function(url) { 
       that.returnImage(img.$key,url); 

       }).catch(function(error) { 
       // Handle any errors 
       }); 
      }    
     }); 
} 
    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 

} 
export class ImageUrl { 
    url: string; 
    id:string; 
    constructor(public _id:string,public _url: string) { 

    } 
} 

任何想法，我能做些什麼嗎？

謝謝。

Answer 1

你擊中了頭部。從路由參數轉到使用相同組件的另一個路由參數時，不會再次觸發ngOnInit;只有內容被換出。

路由器被設計爲以這種方式工作，即使路由參數改變也使用相同的組件實例。

在Github上有一個話題（https://github.com/angular/angular/issues/17349）談論這個。來自Matsko的Plunker在該帖子中顯示了一個使用自定義RouteReuseStrategy強制組件重新加載的應用程序的工作版本。

Answer 2

您可以添加路由複用策略是這樣的：

import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router'; 

export class CustomReuseStrategy implements RouteReuseStrategy { 

    shouldDetach(route: ActivatedRouteSnapshot): boolean { 
     return false; 
    } 

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): boolean { 
     return false; 
    } 

    shouldAttach(route: ActivatedRouteSnapshot): boolean { 
     return false;   
    } 

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { 
     return false; 
    } 

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { 
     return false; 
    }  
} 

，然後將其導入到你的模塊供應商：

providers: [ 
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy} 
], 

這將導致ngOnInit火上每個路由參數變化。在我的一個應用程序中，我使用這個策略作爲我的頁面轉換的一部分。我寫了一篇關於我如何設置的文章https://wpwebapps.com/angular-5-router-animations-tied-to-images-loading/