Angular 动画中的角度2/4变量

我尝试使用角度动画和变量，但我犯了一些我无法理解的错误

我想完成的是在侧边栏的“li”元素上“移动”一个“选项卡”。这是我的HTML：

<div class="sidebar-wrapper">
    <div class="nav-container">
      <ul class="nav">
          <li *ngFor="let menuItem of menuItems" routerLinkActive="active"
                class="{{menuItem.class}}" (click)="navMenuToggle($event, menuItem.icon, menuItem.title)">
              <a [routerLink]="[menuItem.path]">
                  <i class="material-icons">{{menuItem.icon}}</i>
                  <p>{{menuItem.title}}</p>
              </a>
          </li>
      </ul>
      <div [@moving-tab]="movTabVar" class="moving-tab" style="width: 230px;">
        <i class="material-icons">{{icon}}</i>
        <p>{{title}}</p>
      </div>
    </div>
</div>

{{menuItem.icon}
{{menuItem.title}



{{icon}}
{{title}}

我已经学习了Angular 4.3.3，并尝试在sidebar.componet.ts中使用动画中的变量：

import { Component, OnInit, ElementRef } from '@angular/core';
import { ROUTES } from './sidebar-routes.config';
import { animate,  transition} from '@angular/animations';

import {movingTabAnimation, movingTab} from './moving-tab-animation';

@Component({
  selector: 'sidebar-cmp',
  moduleId: module.id,
  templateUrl: './sidebar.component.html',

  animations: [movingTab]

})
export class SidebarComponent implements OnInit {

  public movTabVar = {

    value: 'inactive',
    params: {translate3d: 'translate3d(0, 20px, 0)'},

  }

  public menuItems;
  public icon: String;
  public title: String;

  constructor() {

  this.movTabVar.value = "inactive";
  this.movTabVar.params.translate3d = "translate3d(0, 380px, 0)";
  this.icon = 'home';
  this.title = 'Home';

  }

  ngOnInit() {

    this.menuItems = ROUTES.filter(menuItem => menuItem);


  }

  navMenuToggle(value, _icon: String, _title: String){

    this.movTabVar.value =(this.movTabVar.value === 'active' ? 'inactive' : 'active');
    this.icon = _icon;
    this.title = _title;
    let  tmp = value.srcElement.parentElement.getBoundingClientRect().top-80;
    this.movTabVar.params.translate3d="translate3d(0," +String(tmp)+"px,0)";

    //<!-- TODO: Clean the consol log -->
    console.log(this.movTabVar.value);
    console.log("the icon is "+this.icon+" the Title is "+this.title);
    console.log("position "+ (this.movTabVar.params.translate3d));


  }

}

从'@angular/core'导入{Component，OnInit，ElementRef}；
从“./sidebar ROUTES.config”导入{ROUTES}；
从“@angular/animations”导入{animate，transition}；
从“/movingTab animation”导入{movingTab animation，movingTab}；
@组成部分({
选择器：“侧边栏cmp”，
moduleId:module.id，
templateUrl:'./sidebar.component.html'，
动画：[移动选项卡]
})
导出类SidebarComponent实现OnInit{
公共movTabVar={
值：“非活动”，
参数：{translate3d:'translate3d（0，20px，0）}，
}
公共菜单；
公共图标：字符串；
公共标题：字符串；
构造函数（）{
this.movTabVar.value=“非活动”；
this.movTabVar.params.translate3d=“translate3d（0380px，0）”；
this.icon='home'；
this.title='Home'；
}
恩戈尼尼特（）{
this.menuItems=ROUTES.filter（menuItem=>menuItem）；
}
导航菜单切换（值，_图标：字符串，_标题：字符串）{
this.movTabVar.value=（this.movTabVar.value==='active'？'inactive'：'active'）；
this.icon=\u icon；
this.title=\u title；
让tmp=value.srcElement.parentElement.getBoundingClientRect（）.top-80；
this.movTabVar.params.translate3d=“translate3d（0，+String（tmp）+”px，0）”；
//
log（this.movTabVar.value）；
console.log（“图标为“+this.icon+”标题为“+this.Title”）；
log（“position”+（this.movTabVar.params.translate3d））；
}
}

这是我的动画：

import {
  animate,
  animateChild,
  animation,
  state,
  style,
  transition,
  trigger,
  useAnimation
} from '@angular/animations';

export const movingTabAnimation = animation([
  style({
    transform: '{{translate3d}}'
  }),
animate('0.9s cubic-bezier(0.29, 1.42, 0.79, 1)')
], { params: { translate3d: 'translate3d(0, 20px, 0)' } });

export const movingTab = trigger(
  'moving-tab',
  [
    transition(
      'inactive <=> active',
      [
        useAnimation(movingTabAnimation)
      ],
      { params: { translate3d: 'translate3d(0, 380px, 0)' } }
    )
  ]
);

导入{
使有生气
animateChild，
动画
国家,，
风格
过渡，
触发
使用动画
}来自“@angular/animations”；
export const movingTabAnimation=动画([
风格({
转换：“{translate3d}”
}),
动画（'0.9s立方贝塞尔（0.29,1.42,0.79,1'））
]，{params:{translate3d:'translate3d（0，20px，0）}}；
export const movingTab=触发器(
“移动选项卡”，
[
过渡(
“非活动-活动”，
[
使用动画（移动动画）
],
{params:{translate3d:'translate3d（0380px，0）}
)
]
);

控制台上没有任何错误，但选项卡固定在同一位置

提前感谢你的帮助