使用变量进行动画的Angular 4

Question

我正在使用 @angular/animations: 4.4.6 尝试为一个组件添加展开/折叠动画，这个组件将显示大量的文本。默认情况下，它会显示一定量的文本，但是不同的父级组件可以定义不同的收起高度。
据我所知，我已经做到了一切正确。但是 animations 装饰器却忽略了输入，并直接使用了默认值。

import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-long-text',
  templateUrl: './long-text.component.html',
  styleUrls: ['./long-text.component.scss'],
  animations: [
    trigger('expandCollapse',[
      state('collapsed, void', style({
        height: '{{min_height}}',
      }), {params: {min_height: '4.125em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})
export class LongTextComponent implements OnInit {

  @Input() minHeight: string;
  @Input() textBody: string;
  longTextState: string = 'collapsed';
  constructor() {

   }

  ngOnInit() {
  }

  expandText(){
    this.longTextState = this.longTextState === 'expanded' ? 'collapsed' : 'expanded';
  }
}

并且html代码为：<div [@expandCollapse]="{value: longTextState, min_height: minHeight}" [innerHtml]="textBody" >

为了完整起见需要说明：含有动画效果的那个父级<div>带有一个属性(click)="expandTex()"。

- AvailableName

---

据我所知，我做的一切都是正确的。 你可以在 Stackblitz 中重现这个问题吗？ - Rahul Singh

@RahulSingh：https://angular-mh66ap.stackblitz.io 你可以看到动画是有效的，但它会回退到折叠高度的默认值，而不是@Input()中获取的值。 - AvailableName

Answer 1

你需要在模板中将参数值包装在一个名为 "params" 的对象中。

你需要在模板中将参数值包装在一个名为 "params" 的对象中

   @Component({
  selector: 'hello',
  template:  `<div (click)="expandText()" style="cursor: pointer">
                <div [@expandCollapse]="{value: longTextState, params:{min_height: minHeight}}" [innerHtml]="textBody" style="overflow: hidden;">
                </div> // you need to wrap it in params the input values
                <h1>{{longTextState}}</h1>
                <h1>this.minHeight: {{minHeight}}</h1>
              </div>`,
  styles: [`h1 { font-family: Lato; }`],
  animations: [
    trigger('expandCollapse',[
      state('collapsed', style({
        height: '{{min_height}}',
      }), {params: {min_height: '3em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})

工作中的链接

- Rahul Singh