Question

我正在尝试在angular5中设置DOM元素的动画。我在循环中调用drawingComponent的manipulateStyle方法。它将x，y坐标作为输入，并使用指令在DOM元素上呈现样式。如果从drawingComponent的onInit调用，即没有循环，则相同的manipulateStyle（）方法有效。但不是循环。我正在使用循环，因为我需要为x，y co-ords数组设置动画。

我创建了一个自定义指令，将observable作为输入，此输入observable在此指令的ngOnInit（）中订阅，如下所示

@Directive({ selector: '[playerStyle]' })
export class StyleDirective implements OnInit{
  @Input() playerStyle: Observable<any>;
  constructor(public el: ElementRef,public renderer: Renderer) { }
  ngOnInit(){
        this.playerStyle.subscribe(
            result=>
            {
                let style = "transform:"+result.transform+"; position: absolute; 
                top:"+ result.top+ "; left:"+result.left +";";
                this.renderer.setElementProperty(this.el.nativeElement, 'style', 
                style);                
            }     
        );
    }
}

drawingcompoenent.ts有一个startplaying（）函数，点击按钮

StartPlaying(event: any)
    {
        for(let i =0;i<200 ; i+=15)
        {
            this.sleep(100);
            this.manipulateStyle(i,i+5);
        }
    }

和一个manipulateStyle函数

   manipulateStyle(top:number,left:number)
   {
        this.styles = { 'transform':'translate(0px,0px)', 'position': 
        'absolute', 'top': top+'px', 'left': left+'px' };
        this.stylechange = new  BehaviorSubject<any>(this.styles);

   }

和drawingcompoenent.Html链接自定义指令 this.stylechange被赋予指令 [playerStyle] =“stylechange”

 <img src="BallImage.png" [playerStyle] = "stylechange" ngDraggable (stopped)="dragend($event)" (started)="dragstarted($event)">

我在这里做错了什么？有人对如何实现这个有任何建议吗？

如何使用Directive和Observable为Angular中的dom元素设置动画

0 个答案: