我想从 html 传递组件动画的延迟,例如:
html:
<circles[delay]="'10000ms'"></circles>
ts:
@Component({
selector: 'circles',
templateUrl: 'app/landing-page/subcomponents/circles.component.html',
styleUrls: ['app/landing-page/subcomponents/circles.component.css'],
animations: [
trigger('flyIn', [
state('in', style({ transform: 'translateY(0)', opacity: 1 })),
transition('void => *', [
style({ transform: 'translateY(-100%)', opacity: 0 }),
animate("1000ms" + this.delay)
])
])
]
})
export class CirclesComponent {
@Input() private delay: string;
但是,当我这样做时,会出现以下错误:
(SystemJS) 无法读取未定义的属性“延迟”(…)
如何将延迟传递给 html 中的组件而不导致此错误?
您正在尝试使用this
in this.delay
引用当前班级,但您是在班级外执行此操作。注意@Component()
函数在声明之前执行class CirclesComponent
这不是很优雅,但你可以在window
当你想设置延迟时对象
window.custom = {delay:'1000ms'}
然后在你的动画中,你可以使用`window.custom?窗口.自定义.延迟:
animate("1000ms" + (window.custom? window.custom.delay : ""))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)