Angular 将参数映射到 ViewChild 元素的工具

Question

对于我构建的视频会议应用程序，我有一个方法（如下）需要重构。该应用程序运行良好，实际上有 18 个图块，但为了便于讨论，我将其缩写了。 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>

@ViewChild 元素定义如下：

  @ViewChild('tile0') tile0: ElementRef;
  @ViewChild('tile1') tile1: ElementRef;
  @ViewChild('tile2') tile2: ElementRef;
  @ViewChild('tile3') tile3: ElementRef;
  @ViewChild('tile4') tile4: ElementRef;

  @ViewChild('video0') video0: ElementRef;
  @ViewChild('video1') video1: ElementRef;
  @ViewChild('video2') video2: ElementRef;
  @ViewChild('video3') video3: ElementRef;
  @ViewChild('video4') video4: ElementRef;

  @ViewChild('nameplate0') nameplate0: ElementRef;
  @ViewChild('nameplate1') nameplate1: ElementRef;
  @ViewChild('nameplate2') nameplate2: ElementRef;
  @ViewChild('nameplate3') nameplate3: ElementRef;
  @ViewChild('nameplate4') nameplate4: ElementRef;

该应用程序动态分配图块，并且该方法始终用于操纵 DOM、停止和开始视频、切换可见性和更改布局。

我想摆脱对 ViewChild 元素的这种文字引用。我试过字符串文字，但只是对字符串进行操作。我将如何重构此方法，以便我可以采用索引参数和 return 对特定 @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;
  }

我知道字符串文字不起作用，这样做实际上只是为了传达我希望重构执行的操作的想法。我如何才能使此方法 return 成为 viewChild 而无需如此明确地引用单个 @viewChild 的方法。

Answer 1

这就是 Angular 中有 ViewChildrenin 的原因。不过它 returns 一个 QueryList，所以你需要订阅它。还需要以某种方式对 HTML 元素进行分组（例如添加 CSS class，或按类型阅读）。

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

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

Angular 将参数映射到 ViewChild 元素的工具

Angular tooling to map a parameter to a ViewChild element

angular

typescript

viewchild