angular - 使用从数组中单击 HostListener 获取角度组件中的特定 DOM 元素

问题描述

这有点难以解释，但我会尽力而为。

我有一个名为 feed 的组件，它需要一个对象（feed）的数组（feeds）。我有一个显示所有提要的模板，我创建它们的方式是使用 ngFor。

例如，它为每一个单独创建 div 容器。

基本上，我正在尝试识别我单击的特定提要，而不是使用该提要容器类来识别所有提要...因为当然，它是根据我们在数组中拥有的提要项目的数量来共享的。

我面临的问题是我希望能够单击一（1）个提要并控制台记录某些内容。我如何实现这一点是通过创建这个：

@HostListener('click', ['$event'])
  feedClickEvent(event: any) {
    console.log(event);
    this.feedListModel.map((feedItem, index) => {
      const x = document.getElementsByClassName(index.toString());

      if (x[0].id === feedItem.id) {
        //console.log("I`m triggered ", feedItem.id);
      }
    });
  }

但是，我想获取单击的当前 div id，但我不知道具体如何，我尝试了许多不同的场景，但它们没有用。

feedListModel 是具有对象数组的组件的输入，并基于它创建单独的 div（提要）。

这是 HTML 模板：

<div class="container">
    <div class="row feed-container" id="{{feedItem.id}}" *ngFor="let feedItem of feedListModel; let i = index">
        <div class="feed-item {{i}}" id="{{feedItem.id}}">
            <div class="col-sm-4 column-inlineBlock feed-avatar">
                <span>
                    <k-icon [icon]=" { type: 'image', src: 'someUrlPhoto', extraClass: 'feed-icon'}"></k-icon>
                </span>
            </div>
            <div class="col-sm-7 column-inlineBlock main-feed-content">
                <div class="title"><strong>{{feedItem.secondColumn.title}}</strong></div>
                <div class="description">{{feedItem.secondColumn.description}}</div>
                <div class="footer" *ngIf="!feedItem.secondColumn.footer.isTimeAgo">{{feedItem.secondColumn.footer.value}}</div>
                <div class="footer time-ago" *ngIf="feedItem.secondColumn.footer.isTimeAgo">
                    <k-icon [icon]="{type: 'fas', name: feedItem.secondColumn.footer.icon.icon, extraClass: 'icon-clock'}"></k-icon>
                    {{feedItem.secondColumn.value | timeAgo}}
                </div>
            </div>
            <div class="col-sm-1 column-inlineBlock third-col" *ngIf="!isTwoColumn">
                <div class="third-col-wrapper">
                    <span class="icon-indicator {{feedItem.thirdColumn.status}}">
                        <k-icon [icon]="{type: 'fas', name: feedItem.thirdColumn.kIcon.icon, extraClass: 'icon-number'}"></k-icon>
                </span>
                <span class="number-indicator">
                    <strong id="value-indicator">{{feedItem.thirdColumn.value}}</strong>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>

例如，在主机侦听器中，我控制台记录 event.currentTarget 并且我得到 2 个 div，即使我单击了第一个 div(feed)。换句话说，有 2 个提要。而且我只需要带有它的ID的点击一个，这样我就可以用它做点什么。

标签： angulardomonclicklistenerangular-templateangular-arrays

如果我理解了，你只需要在模板中的元素上绑定一个点击事件，并在组件中添加一个方法来做你想做的事：

在模板中：

<div class="container">
    <div class="row feed-container" (click)="select(feedItem)" id="{{feedItem.id}}" *ngFor="let feedItem of feedListModel; let i = index">
         ...
    </div>
</div>

在组件中：

public select(feedItem: any) {
    // your logic here
}

angular - 使用从数组中单击 HostListener 获取角度组件中的特定 DOM 元素

问题描述

解决方案

推荐阅读