角度4同一コンポーネント間のアニメーション

Question

同じコンポーネントルートを持つアニメーションに問題があります。たとえば。

{パス： '製品/カテゴリ/：カテゴリ'、成分：CategoryComponent}彼らはngOnitを更新しないので、私はルートのparamsの問題を解決

まず、（）私はこのルートを持っています同じコンポーネント間を移動するときに機能します。しかし、今私は私のアプリケーションにアニメーションを追加し、私が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を使用してコンポーネントを再読み込みするアプリケーションの作業バージョンを示しています。 ngOnInitは、各ルートのパラメータの変更に発射する原因となります

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

：

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

をしてから、プロバイダとしてあなたのモジュールにインポートします。私のアプリでは、私のページ遷移の一環としてこの戦略を使用しました。私はそれをどのように設定したかについての投稿を書いたhttps://wpwebapps.com/angular-5-router-animations-tied-to-images-loading/