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

【问题标题】：Injecting data from component functions into Angular2 animations将组件函数中的数据注入 Angular2 动画
【发布时间】：2017-07-31 00:02:02
【问题描述】：

在角度 2 中，我尝试使用 @angular/animations 制作一个组件，其中 <li> 元素跟随鼠标 (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;
  }

【问题讨论】：

见这里：github.com/angular/angular/issues/9668
您可能会发现这是一款有趣的手表youtube.com/watch?v=Oh9wj-1p2BM 讽刺地标题为 Angular 4.0.0 中的动画，并悲惨地多次提及“即将推出 4.1”。所以也许是4.2？在 6 分钟左右，演讲开始讨论“输入变量”。
谢谢你，我想我必须等待。然而，我一时兴起在我的一个 div 中添加了 [draggable]，它几乎可以按预期工作。

标签： angular angular2-components angular2-animation

【解决方案1】：

就将数据注入动画而言，这是一项功能请求，可能很快就会推出（请参阅https://github.com/angular/angular/issues/9668）。就具有可拖动元素而言，将[draggable] 添加到元素似乎可以解决此问题

【讨论】：