javascript - 使用 Angular 指令在模板中绘制对象

Question

我想使用指令在一系列 div 上方绘制一个三 Angular 形

我有四个方 block 和两个值:充电和正常

charge 用于确定方 block 的颜色。 正常绘制三 Angular 形

我已经创建了一个指令来实现这一点

import { Directive, ElementRef, HostListener, Renderer2, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[squareChart]'
})
export class SquareChartDirective implements OnInit {
  colors = {
    1: '#13a09b',
    2: '#13a03c',
    3: '#eceb1d',
    4: '#d40f0f'
  };
  @Input() charge: number;
  @Input() normal: number;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  ngOnInit() {
    this.highlight(this.charge);
  }
  private highlight(charge: number) {
    let colorCode = Math.trunc(charge / 25) + 1;
    for (let i = 1; i <= colorCode; i++) {
      if (this.el.nativeElement.id === `sqr${i}`) {
        this.el.nativeElement.style.backgroundColor = this.colors[i];
      }
    }
  }
}

我的组件

<div class="container">
  <div class="row">
    <div squareChart id="sqr1" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square" >
    </div>
    <div squareChart id="sqr2" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square" >
    </div>
    <div squareChart id="sqr3" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square" >
    </div>
    <div squareChart id="sqr4" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square">
      </div>
  </div>
</div>

例如，norm = 60，向下三 Angular 形应位于第三个正方形上方(如果为 25，则位于第二个正方形上方，等等。)

示例

我不知道如何从同一个指令中做到这一点。

另一个解决方案可能是第一行用于三 Angular 形，第二行用于正方形，但我认为这不是最佳选择。

这是demo

Answer 1

改用组件。在组件模板中，您可以有条件地隐藏或显示三 Angular 形。

(我可能没有理解你的逻辑，但这不是重点，我认为)

@Component({
  selector: 'square-chart',
  template: '<div [ngClass]="{hidden: !mark}" class="triangle"></div><div [ngStyle]="{background:background}" class="p-2 bd-highlight square"></div>',
})
export class SquareComponent implements OnInit {
  @Input() i: number;
  @Input() charge: number;
  @Input() normal: number;
  mark = false;
  background;
  colors = {
    1: '#13a09b',
    2: '#13a03c',
    3: '#eceb1d',
    4: '#d40f0f'
  };

  ngOnInit() {
    this.background = this.colors[this.i];
    this.mark = +this.i === 2;
  }

}

https://stackblitz.com/edit/angular-3kfmgg?file=src/app/app.component.html