2017-02-17 7 views
4

Ich versuche, eine Animation auszulösen, wenn sich die Parameter für eine Komponente ändern, kann aber die Animation erst ausführen, wenn die Komponente zum ersten Mal geroutet wird. Alle nachfolgenden Navigationen zu dieser Komponente mit unterschiedlichen Parametern lösen die Animation nicht aus.Auslöseranimation auf Komponente, wenn Parameter sich ändern

Siehe beispielsweise this plunker.

Wenn von

Navigation
/home 

zu

/home/animated/1 

die Animation ausgeführt wird. Wenn sich nur die ID ändert, z.

/home/animated/2 

nichts passiert überhaupt. Was fehlt mir oder ist das beabsichtigte Verhalten?

+1

irgendein update drauf? –

Antwort

0

Ich lief auch in dieses Problem, wenn jemand weiß, warum bitte helfen - Meine Lösung:

hatte ich ein Karussell, das automatisch durch die Folien geleitet:

Component.HTML: ich die wickeln musste div der geroutet Komponente in einer Animation

<div [@slideInOutAnimation]='mainState'></div> 

dann den Zustand ändern, wenn es um eine neue ID und Verzögerung geführt, bevor der Zustand wieder ändern, dass er wieder für die nächste Folie laufen kann.

Component.TS:

this.mainState = 'enter'; 
var delayAnim = setTimeout(() => { 
this.mainState = 'new'; 
},3000) 

hier Teil der Animation wird diese Animation.TS wurde mit:

trigger('slideInOutAnimation', [ 

    state('new', style({ 
     ... 
    })), 

    transition('* => enter', [ 
    ...style...animate... 
    ]) 

auf diese Weise, wenn sie auf eine neue ID-Routing verändert es den Staat "Enter" Lassen Sie die Animation laufen und ändern Sie den Status wieder auf "Neu", damit die Animation als nächste Route erneut ausgeführt werden kann. home/komponente/1 => home-komponente/2 usw.

Verwandte Themen