Injection de données à partir de fonctions de composant dans des animations Angular2

Question

Dans l'angle 2, j'essaie d'utiliser @angular/animations pour créer un composant où un élément <li> suit la souris (ondrag) et reste en position après (ondragend). Je suis assez nouveau à angulaire et très perdu sur ce que la meilleure façon de s'attaquer à ce problème est. Je voudrais pouvoir injecter une chaîne de mon composant dans les animations mais je ne suis pas sûr si c'est possible. Voir un exemple ci-dessous.

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

En ce qui concerne l'injection des données dans les animations, il est une demande de fonctionnalité et à venir peut-être (voir https://github.com/angular/angular/issues/9668). En termes d'avoir un élément draggable ajoutant [draggable] à un élément semble résoudre ce problème