角getDocumentById

Question

我有一个组件，试图根据我传递给它的ID (InputSeats)向SVG元素添加一个类，这个id与svg元素ID匹配。下面的代码工作，但我担心必须使用document.getElementByID()来传递到Render2，并想知道什么是更以角度为中心的方法。我可能不是在问正确的问题，但希望我所问的是有意义的。最初在组件加载时不知道ID，这也是最初抓取容器的原因。

 export class ViewChartComponent implements AfterViewInit {
  @ViewChild('seats', { static: true }) seats: ElementRef;
  @Input() InputSeats: SeatCoordinate[];

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit(): void {
    this.colorSeat(this.formatSeats(this.InputSeats))
  }

  colorSeat(seatNumber: string[]): void {
    seatNumber.forEach(seat => {
      this.renderer.removeClass(document.getElementById(seat), 'cls-4')
      this.renderer.removeClass(document.getElementById(seat), 'cls-7')
      this.renderer.removeClass(document.getElementById(seat), 'cls-8')
      this.renderer.setStyle(document.getElementById(seat), 'fill', '#000')
    })
  }

  formatSeats(input: SeatCoordinate[]): string[] {
    return input.map(seat => (seat.sectionCode + '.' + seat.rowNumber + '.' + seat.seatNumber))
  }

}

HTML的一个简单示例：

<g #seats id="SEAT_RECTANGLES" data-name="SEAT RECTANGLES">
<rect id="303.HH.41" class="cls-3" x="480.24" y="576.74" width="7.68" height="11.32"/>
<rect id="303.HH.42" class="cls-3" x="489.72" y="576.74" width="7.68" height="11.32"/>
<rect id="303.HH.43" class="cls-3" x="499.19" y="576.74" width="7.68" height="11.32"/>
.......

Answer 1

您的document.getElementById(“座位”)是this.seats.nativeElement

但是您也可以使用变量和ngClass类或类似的。

<g #seats id="SEAT_RECTANGLES" [class]="myVariable" 
   [fill]="myColor" data-name="SEAT RECTANGLES">
...
</g>

和

myVariable="class-1 class-2"
myColor="#ff00ff"

这不仅是关于svg，您还可以使用与路径。有时您需要使用attr."property"，例如在您可以使用的路径中。

<path [attr.path]="path" [attr.fill]="fillColor">

和

path="M0,0 L20 30"
fillColor="red"