角度访问DOM同级元素以更改css类

Question

如何从集合的ngFor迭代中访问按钮的相应同级元素？

Dom元素，我正在尝试访问这个Dom元素，这样我就可以更改兄弟元素div.popup类。如链接在文章底部的Codepen示例所示。

我对棱角分明很陌生，请给我建议。

<button
#popBtn
href="#"
id="info"
class="info popup-trigger"
title="info"
(click)="PopUp($event)"
>
Popup
</button>

在这里发帖之前，我阅读了以下文章，但我无法完全理解或与之相关。

通过ng-click 传递对DOM对象的引用

如何使用ng点击获取DOM元素

如何在ngFor中点击元素html来添加css类？

代码概述

组件.html

<section class="ArticlesGrid">
<div *ngFor="let article of articles" class="windowsBox">
<article class="ui-titlebar">
<h4 class="ui-titletext">{{article.title}}</h4>
</article>
<div class="windowsScreen">
<button
#popBtn
href="#"
id="info"
class="info popup-trigger"
title="info"
(click)="PopUp($event)"
>
Popup
</button>
<div class="popup" role="alert">
<div class="popup-container">
<a href="#" class="popup-close img-replace">Close</a>
<p>{{article.content}}}</p>
</div>
</div>
</div>
<p class="windowsTech">
Technologies:
<span class="THtml"></span>
<span class="TCss"></span>
<span class="TJs"></span>
</p>
</div>
</section>

组件.ts

PopUp(event: Event) {
//console.log(this.viewBtn.nativeElement.nextElementSibling.classList.toggle("is-visible"));
console.log(event);
// this.viewBtn.nativeElement.
}

SandBox实物模型

https://stackblitz.com/edit/angular-collection-popup?file=src/app/app.component.html

镜像的功能

https://codepen.io/Gugiui/pen/vweXYR

谢谢你阅读我的问题。我希望你能建议/指导我

Answer 1

在弹出的div-上添加模板引用变量

<div class="popup" role="alert" #popupDiv>

通过按钮点击功能-

(click)="PopUp($event, popupDiv)"

使用普通javascript-在PopUp方法中更改类

PopUp(event: Event, element) {
element.classList.remove('popup');
element.classList.add('test');
console.log(element.classList);
}