Angular 访问 DOM 同级元素以更改 css 类答案

【问题标题】：Angular access DOM sibling element to alter css classAngular 访问 DOM 同级元素以更改 css 类
【发布时间】：2021-05-23 07:16:48
【问题描述】：

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

Dom 元素，我正在尝试访问这个 DOM 元素，因此我可以更改同级元素 div.popup 类。如文章底部链接的 Codepen 示例所示。

我是 Angular 的新手，请指教。

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

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

Pass a reference to DOM object with ng-click

how to get DOM element with ng-click

How to get the element html clicked in a ngFor to add a 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

镜像功能

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

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

【问题讨论】：

标签： javascript html css angular

【解决方案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);
  }

【讨论】：