Question

我刚刚开始为我的项目学习Angular。首先，我正在寻找一些方法来访问我的任何svg元素，以动态改变它的风格。所以我使用了ViewChild和ElementRef。

来自html：

<script>
console.log(" <?php $geladen = addslashes(file_get_contents("./testtext")); echo $geladen; ?> ");
</script>

来自组件：

<svg><g ...>
<polygon #someTag1 id = "s0" class="st27" points="67,46 58,46 58,56 67,56 67,70 86,70 86,32 67,32"/>
<polygon #someTag2 id = "s1" class="st27" points="104,46 113,46 113,56 104,56 104,70 85,70 85,32 104,32"/>
<polygon #someTag3 id = "s2" class="st27" points="147,46 138,46 138,56 147,56 147,70 166,70 166,32 147,32"/>

它按照我的计划运作。

问题是我想要从许多不同元素的组中更改一个元素，而不仅仅是＃someTag1。所以我想，当我有260个不同的多边形时，在这个解决方案中，我需要创建260个ViewChilds ......

我认为我应该使用ViewChildren并为我的svg元素创建单独的组件或类，但我真的不知道该怎么做。或者也许有不同的方式？

我感谢任何建议。

Answer 1

我假设您通过迭代某种列表来创建200多个多边形。

<强> some.component.ts

import { Component, AfterViewInit, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'some-component',
  template: `<polygon #poly *ngFor="let item of items" />`
})
export class SomeComponent
  items = Array(260)

  @ViewChildren('poly') refs: QueryList<ElementRef> ;

  ngAfterViewInit() {
    // do something with the polygons
  }

Angular：如何访问许多svg元素之一？

1 个答案: