Estoy tratando de obtener una animación entre las rutas que funcionan en un proyecto Angular 4, pero necesito poder modificar la dirección de la animación (translateX) en función de la forma en que el usuario navega por la aplicación.

Descubrí que la única forma de mantener tanto los componentes de entrada como los de salida en el DOM es usar el estado nulo.

Además, tengo que vincular la animación al elemento anfitrión. Si trato de vincularlo a un elemento dentro del componente, el componente de salida simplemente se reemplaza con el componente de entrada.

Quiero esto porque no quiero que desaparezca el componente de salida; quiero que se deslice mientras el componente de entrada se desliza hacia adentro para obtener una aplicación de sensación nativa fluida.

Tengo un disparador único configurado con cuatro transiciones:

 trigger('routing',[ state('*',style({transform: 'translateX(0)'})), transition('void => back',[ style({transform: 'translateX(-100%'}), animate('800ms') ]), transition('back => void',[ animate('800ms',style({ transform:'translateX(100%)' })) ]), transition('void => forward',[ style({transform: 'translateX(100%'}), animate('800ms') ]), transition('forward => void',[ animate('800ms',style({ transform:'translateX(-100%)' })) ]) ])

En mi clase de componentes exportados, estoy vinculando esto a los elementos del host del componente con:

 @HostBinding('@routing') routing

Puedo manipular el routing (configurándolo en 'atrás' o 'adelante' para controlar la dirección), pero esto parece crear una nueva instancia de la variable, de modo que si quiero cambiar la dirección de la animación, la página que sale se anima en la dirección opuesta a la componente entrante porque la instancia de routing no parece haber cambiado.

¿Hay alguna forma de actualizar la instancia de routing vinculada al elemento host? ¿Hay alguna forma alternativa de lograr el resultado que necesito?

Gracias.