Angular 2-将延迟传递到组件动画作为输入参数 [英] Angular 2 - pass delay to component animation as input parameter

问题描述

我想通过html传递组件动画的延迟，例如:

I want to pass in the delay of a component's animation from the html eg:

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; 

但是，当我这样做时会出现此错误:

However when I do that it gives this error:

(SystemJS)无法读取未定义(...)的属性延迟"

(SystemJS) Cannot read property 'delay' of undefined(…)

如何在不引起此错误的情况下将延迟传递给html中的组件?

How can I pass in the delay to the component in html without causing this error?

推荐答案

您正在尝试使用this.delay中的this来引用当前类，但是您正在类外进行此操作.请注意，在声明class CirclesComponent

You are trying to use this in this.delay to refer to the current class, but you are doing this outside the class. Note that @Component() function is executed before you declare class CirclesComponent

这不是很优雅，但是当您想设置延迟时，可以在window对象上设置一个属性

This isn't very elegant but you could set a property on the window object when you want to set the delay

window.custom = {delay:'1000ms'}

然后在动画中，您可以使用`window.custom?访问它. window.custom.delay:

Then in your animation, you could access it with `window.custom? window.custom.delay :

animate("1000ms" + (window.custom? window.custom.delay : ""))

这篇关于Angular 2-将延迟传递到组件动画作为输入参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！