Question

我一直在尝试使用@HostBinding装饰设置动画参数，但它似乎不起作用，我缺少什么

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

和HostBinding

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

Answer 1

如果将getter函数添加到主机绑定属性，则可以设置动画参数。

trigger: any;
easingTime = 5000;

@HostBinding('@animateMe') 
get fn() {
    return {
        value: this.trigger,
        params: {
            easeTime: this.easingTime
        }
    }
};

Answer 2

不幸的是，这不起作用，因为动画是在实际生成组件之前创建的（此代码在@Component元数据中）。

班级以外的任何代码都不在同一范围内。

另外，我不确定，但我不会想到你可以使用@HostBinding绑定到动画，相反，你可以像这样使用动画回调：

＆＃13;

$payments = array();
        $pays = User::find($userid);
        foreach ($pays->payments as $pay) {
        $payments = $pay->payment;
        }

＆＃13;

参考：https://angular.io/guide/animations#animation-callbacks

Answer 3

宿主元素中的动画应按以下方式处理：

animations: [
    trigger('toggleDrawer', [
        state('closed', style({
            transform: 'translateX(0)'
        })),
        state('opened', style({
            transform: 'translateX(80vw)'
        })),
        transition('closed <=> opened', animate(300))
    ])
]

和HostBinding / HostListener

private state: 'opened' | 'closed' = 'closed';

// binds the animation to the host component
@HostBinding('@toggleDrawer') get getToggleDrawer(): string {
    return this.state === 'closed' ? 'opened' : 'closed';
}

@HostListener('@toggleDrawer.start', ['$event']) startDrawerHandler(event: any): void {
    console.log(event);
}

@HostListener('@toggleDrawer.done', ['$event']) doneDrawerHandler(event: any): void {
    console.log(event);
}

请记住，HostListeners将在加载时以状态为void（fromState：“ void”）的事件执行，我不知道是否可以从动画声明中防止这种情况，或者是否只需要制作一个如果要防止某些事情发生，请在HostListeners内部有条件。

使用Host Binding设置Angular动画参数

3 个答案: