Angular 用于将参数映射到ViewChild元素的角度工具

对于我构建的视频会议应用程序，我有一个方法（如下）需要重构。该应用程序运行良好，实际上有18个tile，但为了便于讨论，我将其缩写。在Angular（本例中为Angular 10.0.6 w/TypeScript 3.9.5）中是否有方法使用动态参数访问@ViewChild/ElementRef

以下是我使用的方法：

  getTilesFromIndex = (index: number) => {
    const tileObject = {
      tile: null,
      video: null,
      nameplate: null
    };
    switch (index) {
      case 0:
        tileObject.tile = this.tile0.nativeElement;
        tileObject.video = this.video0.nativeElement;
        tileObject.nameplate = this.nameplate0.nativeElement;
        break;
      case 1:
        tileObject.tile = this.tile1.nativeElement;
        tileObject.video = this.video1.nativeElement;
        tileObject.nameplate = this.nameplate1.nativeElement;
        break;
      case 2:
        tileObject.tile = this.tile2.nativeElement;
        tileObject.video = this.video2.nativeElement;
        tileObject.nameplate = this.nameplate2.nativeElement;
        break;
      case 3:
        tileObject.tile = this.tile3.nativeElement;
        tileObject.video = this.video3.nativeElement;
        tileObject.nameplate = this.nameplate3.nativeElement;
        break;
      case 4:
        tileObject.tile = this.tile4.nativeElement;
        tileObject.video = this.video4.nativeElement;
        tileObject.nameplate = this.nameplate4.nativeElement;
        break;
    }
    return tileObject;
  }

它引用了相应的标记：

  <div id="tile-0" style="display:none" #tile0>
    <video id="video-0" class="w-100 h-100" #video0></video>
    <div id="nameplate-0" #nameplate0></div>
  </div>
  <div id="tile-1" style="display:none" #tile1>
    <video id="video-1" class="w-100 h-100" #video1></video>
    <div id="nameplate-1" #nameplate1></div>
  </div>
  <div id="tile-2" style="display:none" #tile2>
    <video id="video-2" class="w-100 h-100" #video2></video>
    <div id="nameplate-2" #nameplate2></div>
  </div>
  <div id="tile-3" style="display:none" #tile3>
    <video id="video-3" class="w-100 h-100" #video3></video>
    <div id="nameplate-3" #nameplate3></div>
  </div>
  <div id="tile-4" style="display:none" #tile4>
    <video id="video-4" class="w-100 h-100" #video4></video>
    <div id="nameplate-4" #nameplate4></div>
  </div>

应用程序动态分配分幅，该方法始终用于操作DOM、停止和启动视频、切换可见性和更改布局

我想摆脱对ViewChild元素的这种文字引用。我已经尝试了字符串文字，但是这个函数只对字符串进行操作。如何重构此方法，以便获取index参数并返回对特定@ViewChild的引用。以伪代码为例：

getTilesFromIndex = (index: number) => {
    const tileObject = {
      tile: null,
      video: null,
      nameplate: null
    };

   tileObject.tile = this.tile${index}.nativeElement;
   tileObject.video = this.video${index}.nativeElement;
   tileObject.nameplate = this.nameplate${index}.nativeElement;
    
   return tileObject;
  }

---

我知道字符串文字不起作用，这实际上是为了传达我想要重构做什么的想法。我如何使此方法返回viewChild而不显式引用单个@viewChild。

这就是为什么Angular中存在

ViewChildrenin

。它返回一个

QueryList

，因此您需要订阅它。还需要以某种方式对HTML元素进行分组（比如添加CSS类，或者按类型读取）

@ViewChildren（'.video'）视频！：查询列表；
ngAfgterViewInit（）{
此。视频。更改。订阅（。。。
}

这看起来确实是重构中最好的方法。看起来我必须为平铺、视频和视频单独设置@viewChildren，这样才能以类似的方式显示平铺对象。是的，您需要为每个对象分别设置viewChildren。这还远远不够成熟：-）。。为什么不从组件控制一切？我将创建一个包含所有视频引用的数组，并在模板中使用*ngFor.循环遍历它。。这样，你就少了很多模板，并且可以直接访问组件中的索引。目标是干燥这个组件，是的，使用*ngFor进行迭代。我一直在努力解决的问题是，DIV是由Amazon Chime SDK动态分配的，必须已经存在，才能绑定到媒体流。我一直试图将它们存储在一个数组中并进行迭代，但不断发现流无法绑定到它们，因为它们不存在。本周我花了一些时间尝试将此方法与@viewChildren结合使用，作为我正在进行的动态布局任务的一部分。

getTilesFromIndex = (index: number) => {
    const tileObject = {
      tile: null,
      video: null,
      nameplate: null
    };

   tileObject.tile = this.tile${index}.nativeElement;
   tileObject.video = this.video${index}.nativeElement;
   tileObject.nameplate = this.nameplate${index}.nativeElement;
    
   return tileObject;
  }

@ViewChildren('.video') videos!: QueryList<ElementRef>;

ngAfgterViewInit() {
  this.videos.changes.subscribe(...
}