Angular 访问 DOM 同级元素以更改 css class

Question

如何从我的集合上的 ngFor 迭代中访问按钮的相应兄弟元素？

Dom 元素，我正在尝试访问此 DOM 元素，因此我可以更改兄弟元素 div.popup class。 如帖子底部链接的 Codepen 示例所示。

我对 angular 很陌生，请指教。

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

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

使用 ng-click 传递对 DOM object 的引用

如何使用 ng-click 获取 DOM 元素

如何在 ngFor 中单击元素 html 以添加 css class？

代码概述

组件.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.
  }

沙盒模型

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

Function转镜像

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

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

Answer 1

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

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

将其传递给按钮单击 function -

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

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

PopUp(event: Event, element) {

    element.classList.remove('popup');
    element.classList.add('test');
    console.log(element.classList);
  }