Angular 2の要素の高さを取得

Question

Angular 2 Animationsを使用して要素を「スライドトグル」しようとしています。上記のコード

https://plnkr.co/edit/Dof60vwHp79eiThhj9vW?p=preview

@Component({ 
    selector: 'app-navigation', 
    templateUrl: './navigation.component.html', 
    styleUrls: ['./navigation.component.scss'], 
    animations: [ 
     trigger('toggleHeight', [ 
      state('inactive', style({ 
      height: '0', 
      })), 
      state('active', style({ 
       height: '100%' //this.el.nativeElement.scrollHeight + 'px' 
      })), 
      transition('inactive => active', animate('300ms ease-in')), 
      transition('active => inactive', animate('300ms ease-out')) 
     ]) 
    ] 
}) 

動作しますが、私は正確に高さの推移を見ることができません。 CSSで 'auto'値を持つ 'height'プロパティをアニメートすることはできないことはわかっています。自動するためには

高さを生成、それはそれを

state('active', style({ 
    height: this.nativeElement.height + 'px' 
})), 

、のようなものを作ることは可能ですか？

ありがとうございました。

Answer 1

これはAFAIKで動作するはずです。

height: '*' 

できます ！

詳細はこちらhttps://angular.io/docs/ts/latest/guide/animations.html#!#automatic-property-calculation