angular - 动画 Angular2 中的参数

Question

我正在尝试制作一个简单的动画，例如下面的简单 jQuery

animate({'left' : left_indent})

我正在使用 Angular2 动画，但问题是如何将组件类外部的 left_indent 参数传递给动画触发器？

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: this.left_indent,
        })),

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

Answer 1

现在有可能。

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: '{{left_indent}}', // use interpolation
        }), {params: {left_indent: 0}}), // default parameters values required

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

更新(根据 SplitterAlex 的回答):

在模板中(对于 Angular < 4.4.6):

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>

对于 Angular >= 4.4.6 模板应该是

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>