在角度 2 中选择具有 1 个哈希选择的 viewchild答案

【问题标题】：Selecting viewchild with 1 hash selection in angular 2在角度 2 中选择具有 1 个哈希选择的 viewchild
【发布时间】：2017-09-15 09:25:40
【问题描述】：

有没有一个技巧可以在同一个级别选择多个相同的标签？

<div #el></div>
<div #el></div>
<div #el></div>

总是给出“引用“#el”被定义多次”错误消息。

提前致谢

【问题讨论】：

你不能给多个元素相同的ID。它只会选择第一个元素。
@Dhavalkansagara 那么还有其他方法可以做到这一点吗？ here 是制作我想要的东西的链接，但是这种方法太复杂了，无法与我当前的代码同步..
你不能，在你尝试使用 ViewChildren 和 QueryList 时，你会像你一样只得到一个带有模板变量的项目，但如果你将这些用于组件/指令，它会给出一个列表
使用同一个变量引用的目的是什么？您可以使用包装器并为其提供唯一的变量引用作为解决方法吗？
@Vega 是的，我按照你说的做了，只是想让更简单......谢谢

【解决方案1】：

下面的方法对我来说对我的多个元素有效。

。

我需要从代码库动态加载弹出模式，并执行一些操作，如最小化、最大化、关闭和调整大小。当时我必须选择任何一个打开的模态来执行一些操作，我想出了这个解决方案。

下面是我的 HTML，其中我使用了#dynamicPopupContentPlaceHolder 作为 div 标签的选择器。

首先，需要从angular/core库的组件中添加QueryList，如下所示。

最后，在组件文件中，我使用了 QueryList（包含子数组）来获取使用以下方式的所有子项。

最后我使用widgetSelector变量通过以下方式从数组中获取最后一个子节点。

let _targetSelector = this.widgetTargets.last;

【讨论】：

【解决方案2】：

包括 ViewChildren。

import {Component, ViewChildren} from 'angular2/core'

现在你可以使用下面的代码了。

@ViewChildren('el') components:QueryList<ElementRef>;

【讨论】：

我先尝试了，但只选择了第一个元素
@ViewChild 将选择一个但@ViewChildren('el') components:QueryList;这将全选。
@Dhavalkansagara @ViewChildren('el') components:QueryList 只是一个元素。 Note: In this case, it will make more sense to use the @ViewChild decorator because this is only a single element.
他需要选择 3 个带有#el 名称的 div 元素。所以我们需要使用@ViewChildren。
@Dhavalkansagara 对于模板变量它不起作用，只有一个元素。但是对于可以工作的组件或指令。

【解决方案3】：

哦，没关系..我有另一种方法，但不是那么整洁

<div #el>
  <div el></div>
  <div el></div>
  <div el></div>
</div>

然后全选使用 querySelectorAll

@ViewChild('el') element: ElementRef;
this.element.nativeElement.querySelectorAll('[el]')

谢谢大家

【讨论】：