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

Question

我想使用一个指令在一系列 div

上方绘制一个三角形

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

charge用于判断方块的颜色。 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];
      }
    }
  }
}

我的组件

<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 向下三角形应该在第三个正方形上方（如果 25 则在第二个正方形上方等等）

例子

我不知道如何从同一个指令执行此操作。

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

这是demo

Answer 1

您可以使用 Canvas 或使用 absolute 定位的 SVG 元素绘制三角形，所有这些都在您的 directive 中。要使绝对定位起作用，父元素需要定位 relative 到视口。

.square {
  position: relative;
  ...
}

StackBlitz：在SquareChartDirectiveclass中，您可以根据需要从当前drawSVGMarker切换到drawCanvasMarker方法。

Answer 2

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

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

@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

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

Draw an object in template using Angular directive

html

javascript

angular-directive

angular-material

angular