Javascript 使用角度指令在模板中绘制对象

我想用一个指令在一系列div上面画一个三角形

我有四个正方形和两个值：

charge

和

normal

电荷

用于确定正方形的颜色。

normal

绘制三角形

我已经制定了一个指令来做到这一点

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];
      }
    }
  }
}

import{Directive，ElementRef，HostListener，Renderer2，Input，OnInit}来自“@angular/core”；
@指示({
选择器：“[squareChart]”
})
导出类SquareChart指令实现OnInit{
颜色={
1:“#13a09b”，
2:“#13a03c”，
3:"eceb1d",，
4:“#d40f0f”
};
@输入（）费用：数字；
@Input（）正常：数字；
构造函数（私有el:ElementRef，私有呈现器：Renderer2）{}
恩戈尼尼特（）{
此.突出显示（此.费用）；
}
私人精选（收费：号码）{
让colorCode=Math.trunc（电荷/25）+1；
对于（设i=1；i您可以使用
画布
或使用
绝对
定位的
SVG
元素绘制三角形，所有这些都在
指令
内。要使绝对定位有效，父元素需要相对于视口进行定位

.square {
  position: relative;
  ...
}

：在
SquareChartDirective
类中，您可以根据需要从当前的
drawSVGMarker
切换到
drawCanvasMarker
方法。
使用组件。在组件模板中，您可以有条件地隐藏或显示三角形

（我可能没有理解你的逻辑，但我想这不是重点）

@组件({
选择器：'方形图'，
模板：“”，
})
导出类SquareComponent实现OnInit{
@输入（）i：数字；
@输入（）费用：数字；
@Input（）正常：数字；
标记=假；
背景；
颜色={
1:“#13a09b”，
2:“#13a03c”，
3:"eceb1d",，
4:“#d40f0f”
};
恩戈尼尼特（）{
this.background=this.colors[this.i]；
this.mark=+this.i==2；
}
}

它应该根据正常的百分比值绘制，每个正方形代表25%（4个正方形），所以三角形应该是动态的，通过检查Hansmad的

答案得到条件检查，并相应地更改了我的StackBlitz

.square {
  position: relative;
  ...
}

@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;
  }

}