Angular2-5 通用指令在 html 元素上呈现不同的样式答案

【问题标题】：Angular2-5 Generic Directive to render different styles on html elementsAngular2-5 通用指令在 html 元素上呈现不同的样式
【发布时间】：2018-08-14 14:43:49
【问题描述】：

我正在编写 Angular5 应用程序，我在其中根据不同的顶部和左侧位置为对象设置动画。

我有一个父 div，我正在成功地为 3 个子 div 元素设置动画。 问题： 我的代码适用于固定数量的子 div，但我需要使其适用于任意数量的子 div。

我的 animation.compoenent.ts 设置这样的样式

this.styles = { 'transform':'translate(0px,0px)', 'position': 'absolute', 'top': top+'px', 'left': left+'px' };

this.ballStyleChange = new  BehaviorSubject<any>(this.styles);

我的 animation.component.html 看起来像

<div class="parent-container">
     <div [ball1Style] = "ball1StyleChange">Child1</div>
     <div [ball2Style] = "ball2StyleChange">Child1</div>
     <div [ball3Style] = "ball3tyleChange">Child1</div>
</div>

我编写了 3 个指令来处理这 3 个不同子 div 的样式。这是我的 ball1directive 之一的样子

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


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

所以这是我的 3 个指令中的两个，现在问题是我所有的子 div 都将朝不同的方向移动，我需要用一个指令处理所有这些，以便使其对任意数量的子 div 通用。

请分享您的想法，这将非常有帮助。谢谢苏海布

【问题讨论】：

你能提供另外两个的代码吗？我们需要更多关于其他两个如何改变以提供帮助的详细信息
感谢您的回复，我已经更新了上面的代码。你可以看到指令是一样的
也许我遗漏了一些东西，但看起来你的代码应该能够通过使选择器和输入属性像ballStyle而不是@987654325这样通用来重新用于n个对象@、ball2Style 等。然后，您的 html 将包含以下这些：<div [ballStyle]="ball1StyleChange">Child1</div>
您是否想要一个通用组件，它允许您传入任意数量的样式属性来设置，超过上面示例中的 4 个？我不知道你在问什么
我有要循环的点列表，我需要平滑地为球设置动画。为了获得正确的动画效果，我正在使用 windows.requestAnimationFrame。以这种方式实现它指令是我唯一能找到帮助的东西。

标签： angular rxjs observable angular-directive

【解决方案1】：

根据您在此处的内容，我认为该指令不是必需的，因为 Angular 团队已经提供了一个可以满足您需要的指令。您应该可以使用ngStyle 和async pipe。

<div class="parent-container">
    <div [ngStyle]="ball1StyleChange | async">Child1</div>
    <div [ngStyle]="ball2StyleChange | async">Child2</div>
    <div [ngStyle]="ball3StyleChange | async">Child3</div>
</div>

【讨论】：