更新@HostBinding Angular 4动画

Question

我试图在Angular 4项目中工作的路线之间获得动画 - 但需要能够根据用户浏览应用程序的方式改变动画的方向(translateX).

我发现保持DOM中进入和退出组件的唯一方法是使用void状态.

此外,我必须将动画绑定到主机元素.如果我尝试将其绑定到组件中的元素,则只需使用输入组件替换现有组件.

我想要这个,因为我不希望现有组件消失 - 我希望它在进入组件滑入时滑落以获得平滑的原生感觉应用程序.

我有一个触发器设置有四个转换:

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%)'
        }))
    ])
])

在我的组件导出类中,我将其绑定到组件主机元素:

@HostBinding('@routing') routing

我可以操纵routing(将其设置为"后退"或"前进"以控制方向)但这似乎创建了一个新的变量实例,这样如果我想更改动画方向,则退出页面的动画方向与传入方向相反组件因为实例routing似乎没有改变.

有没有办法更新routing绑定到主机元素的实例？有没有其他方法可以达到我需要的结果？

谢谢.