変数でアニメーションを作成する角度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" >

EDIT：（上記の）アニメーションで1の親<div>が(click)="expandTex()"属性を持っています。

Answer 1

あなたがオブジェクトに "paramsは" をテンプレート内のparamの値をラップするnned

@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')) 
    ]) 
    ] 
}) 

ワーキングLINK