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 中的组件？

4

2 回答 2

1

您正在尝试使用thisinthis.delay来引用当前课程，但您是在课程之外执行此操作。请注意，@Component()函数在您声明之前执行class CirclesComponent

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

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

然后在您的动画中，您可以使用 `window.custom? window.custom.delay ：

animate("1000ms" + (window.custom? window.custom.delay : ""))
于 2016-10-20T04:58:51.713 回答
0

我可能会晚一点，但这可能对其他人有帮助。

// Define your animations
export const fadeInDelay =
  trigger('fadeInDelay', [
    transition('void => *', [
        style({ opacity: '0' }),
        animate('250ms {{delay}}ms ease-in')
      ],
      { params: { delay: 200 } } //Fallback value; else it could crash when no delay is passed
    )
  ]);

将其加载到您的组件中：

@Component({
  animations: [fadeInDelay]
})
export class Component {
  ...
}

然后您可以像这样在模板中使用它并控制每个动画的延迟：

<div [@fadeInDelay]="{value: '', params: { delay: 1000}}"></div>
<div [@fadeInDelay]="{value: '', params: { delay: 2000}}"></div>
<div [@fadeInDelay]></div> //using fallback

不要忘记传递 a 值，否则它将不起作用。我希望这有帮助！

于 2018-08-24T06:49:59.147 回答