用于将参数映射到ViewChild元素的角度工具
用于将参数映射到ViewChild元素的角度工具
提问于 2021-02-12 01:32:56
对于我构建的视频会议应用程序，我有一个方法(如下所示)需要重构。这个应用程序运行良好，实际上有18个tiles，但为了便于讨论，我将其缩写。在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元素的文字引用。我尝试过字符串文字，但只是对字符串进行操作。我如何重构这个方法，以便我可以接受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。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-12 01:40:22
这就是为什么在Angular中有ViewChildrenin的原因。不过，它会返回一个QueryList，所以您需要订阅它。还需要以某种方式对HTML元素进行分组(如添加CSS类，或按其类型读取)。
@ViewChildren('.video') videos!: QueryList<ElementRef>;
ngAfgterViewInit() {
this.videos.changes.subscribe(...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66159789
复制相关文章
相似问题
腾讯云开发者
