Запустить анимацию на компоненте при изменении параметров

Question

Я пытаюсь запустить анимацию при изменении параметров компонента, но могу заставить анимацию выполняться только при первом перенаправлении компонента. Все последующие переходы к этому компоненту с другими параметрами не запускают анимацию.

Посмотрите этот поршень, например.

При навигации из

/home

в

/home/animated/1

анимация выполняется. Если меняется только идентификатор, например

/home/animated/2

ничего не происходит вообще. Чего мне не хватает или это предполагаемое поведение?

Answer 1

Я также столкнулся с этой проблемой, если кто-нибудь знает, почему, пожалуйста, помогите - Мое решение:

У меня была карусель, которая автоматически направлялась через слайды:

Component.HTML: мне пришлось обернуть div маршрутизируемого компонента в анимацию

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

Затем измените состояние, когда оно перенаправлено на новый идентификатор, и задержите его, прежде чем снова изменить состояние, чтобы оно могло снова запускаться для следующего слайда.

Component.TS:

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

Вот часть анимации, которая использовала Animation.TS:

trigger('slideInOutAnimation', [

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

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

таким образом, при маршрутизации к новому идентификатору он изменял состояние на "вход", позволяя анимации запускаться, затем изменял состояние обратно на "новый", поэтому на следующем маршруте он сможет снова запустить анимацию. home/component/1 => домашний компонент /2 и т. д.