Javascript 带计算计时的Angular 2动画

使用TypeScript和Angular 2.4

我有一个滚动文本的组件（比如marqueee），还有一个指定滚动速度（每秒像素数）的参数

如何使用“来自组件”的方法动态指定动画长度

假设以下组件：

从'@angular/core'导入{Component，Input，ElementRef，trigger，state，style，transition，animate}；
从“jquery”导入*为$；
常数滚动\速度\默认值=25；
@组成部分({
选择器：“文本滚动”，
模板：“”，
动画：[
触发器（'悬停'[
状态（'idle'，样式（{transformX:'0'}）），
状态（'scrolled'，样式（{transformX:'-100%}）），
转换（'idle=>scrolled'[
设置动画（this.getAnimationSpeed（））
])
])
]
})
导出类TextScroll组件{
@输入（“速度”）速度时间：数字=滚动\速度\默认值；
私有元素：HTMLElement；
构造函数（专用el:ElementRef）{
this.element=this.el.nativeElement；
}
public getAnimationSpeed（）：编号{
让element=this.element；
让elementWidth=$（element）.width（）；
让差异=this.el.nativeElement.scrollWidth-elementWidth；
返回值（差异/数字（此速度时间））*1000；
}
}

模板：

我的龙。。文本

目前，我找不到使用@Component decorator实现此目的的方法，但可能Renderer.animate会很合适

目前我找不到使用

@Component

decorator实现此目的的方法，但可能

Renderer.animate会很合适