Angular 2 - 将延迟作为输入参数传递给组件动画

我想从 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 : ""))