如何获取 Angular 2 中 div 中所有元素的引用？

Posted 2023-03-06

【中文标题】如何获取 Angular 2 中 div 中所有元素的引用？

【英文标题】：How to get the reference of all elements in a div in Angular 2?

【发布时间】：2018-10-24 15:23:23

【问题描述】：

我有一个带有 10 个 html 元素的 div。我怎样才能获得所有这 10 个元素的引用并在单击时在它们上切换一个类？

<div>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
...
</div>
<div class="trigger" (click)="detach()">Detach</div>

SCSS：

.hawk 
    display: block;
    width: 16px; 
    height: 16px;
    border-radius: 10px;
    line-height: 12px;
    cursor: pointer;
    &.mock 
        border-radius: 0px;
    
 

我可以通过使用 jQuery 轻松做到这一点，如下所示：

detach() 
  $('.hawk').toggleClass('mock');

这样做的角度是什么？我尝试使用@ViewChild 并访问父div，但我无法将class 添加到所有子元素中。在将border-radius 更改为0px 时，有没有办法在CSS 中将10px 设置为0px 或使用Angular 动画？

【参考方案1】：

首先你必须使用 ViewChildren 而不是使用 ViewChild

detach() 
    this.hawks.map((elmRef) => 
       if(elmRef.nativeElement.className === 'hawk') 
          elmRef.nativeElement.className = '';
        else 
          elmRef.nativeElement.className = 'hawk';
       
    )

为了您的孩子们：

@ViewChildren('hawk', read: ElementRef) hawks: QueryList<ElementRef>;

和你的 html ：

<some-element #hawk class="hawk"></some-element>
<some-element #hawk class="hawk"></some-element>
<some-element #hawk class="hawk"></some-element>

【讨论】：

很好的答案，但您应该稍微简化一下切换逻辑；）

【参考方案2】：

正如@tjadli 提到的，@ViewChildren 是要走的路。但我认为他的切换逻辑有点复杂。您可以简单地执行以下操作：

@ViewChildren('hawk', read: ElementRef) ref: QueryList<ElementRef>;

HTML：

<div>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
...
</div>
<div class="trigger" (click)="detach()">Detach</div>

功能：

detach() 
  this.ref.map((eleRef) => 
  if(eleRef.nativeElement.classList.contains('hawk')) 
    eleRef.nativeElement.classList.toggle('mock');
  
 );

希望这会有所帮助。