将组件函数中的数据注入Angular2动画

在angular 2中，我试图使用

@angular/animations

制作一个组件，其中

元素跟随鼠标

（ondrag）

，并在

（ondragend）

之后保持在位。我是个新手，对解决这个问题的最好方法是什么非常迷茫。我希望能够将我的组件中的字符串注入动画中，但不确定这是否可行。请参见下面的示例

import { Component } from '@angular/core';

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

@Component({
  selector: 'test-test',
  template: `
  <li
  *ngFor="let letter of list"
  [@lettereState]="letter.state"
  (ondrag)="letter.toggleState(); mouseCords($event.clientX, $event.clientY);"
  (ondragend)="letter.toggleState()">
      {{letter}}
  </li> `,
  animations: [
    trigger('letterState', [
      state('active', style({
        transform: //'translate(Inject the cordinates here {mouseX}, {mouseY})',
      })),
    ])
  ],

})
export class LetterBankComponent {

  constructor(
  ) {}

  private list = ['a', 'b', 'c']
  private mouseX = ''
  private mouseY = ''
  }
  mouseCords(x, y) {
        mouseX = x;
        mouseY = y;
  }

从'@angular/core'导入{Component}；
从“@angular/animations”导入{trigger，state，style，animate，transition}；
@组成部分({
选择器：“测试”，
模板：`

{{字母}}
`，
动画：[
触发器（'letterState'[
状态（'active'，样式({
transform://“translate（在此处注入cordinate{mouseX}，{mouseY}）”，
})),
])
],
})
出口级信笺组件{
建造师(
) {}
私有列表=['a'，'b'，'c']
私人鼠标=“”
私人老鼠=“”
}
鼠标记录（x，y）{
mouseX=x；
mouseY=y；
}

就向动画中注入数据而言，这是一项功能要求，可能很快就会出现（请参阅）。就可拖动元素而言，向元素添加

[draggable]

似乎可以解决这个问题

就向动画中注入数据而言，这是一个功能要求，可能很快就会出现（请参阅）。就拥有一个可拖动的元素而言，向元素添加

[draggable]

似乎可以解决这个问题

参见此处：您可能会发现这是一款有趣的手表，在angular 4.0.0中以讽刺的标题命名为动画，并不幸地多次提到了“coming In 4.1”。那么可能是4.2？大约6分钟后，演讲开始讨论“输入变量”。谢谢，我想我必须等一下。然而，我一时兴起，在我的一个div中添加了一个

[draggable]

，它几乎按照预期工作。请看这里：你可能会发现这是一款有趣的手表，在angular 4.0.0中以讽刺的标题命名为动画，并不幸地多次提到“coming in 4.1”。那么可能是4.2？大约6分钟后，演讲开始讨论“输入变量”。谢谢，我想我必须等一下。然而，我一时兴起，在我的一个div中添加了一个

[draggable]

，它几乎按预期工作。