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

时间:2017-05-20 08:24:42

标签: angular angular2-components angular2-animation

在角度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;
  }

1 个答案:

答案 0 :(得分:0)

在将数据注入动画方面,这是一个功能请求,很快就会出现(参见https://github.com/angular/angular/issues/9668)。在具有可拖动元素方面,向元素添加[draggable]似乎可以解决此问题