Внедрение данных из функций компонентов в анимацию Angular2

Question

В угловых 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;
  }

Answer 1

С точки зрения внедрения данных в анимацию, это запрос функции, который может появиться в ближайшее время (см. https://github.com/angular/angular/issues/9668). С точки зрения добавления перетаскиваемого элемента [draggable] к элементу, кажется, решить эту проблему