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

Question

这个有点难解释，但我会尽力的。

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

例如，它在dividually 中为每个容器创建 div 个容器。

基本上我正在尝试识别我点击的特定提要，而不是所有的提要容器 class...因为当然，它是根据我们有多少提要项目共享的数组中有。

我面临的问题是我希望能够单击一 (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 是带有对象数组的组件的输入，基于此我创建了 individual divs(feeds)。

这是 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>

例如，在 hostlistener 中，我控制台记录 event.currentTarget 并且我得到 2 divs，即使我点击了第一个 div（提要）。换句话说，有 2 个提要。我只需要点击它的 ID，这样我就可以用它做点什么了。

Answer 1

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

在模板中：

<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
}

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

Getting a specific DOM element in angular component using click HostListener from an array

dom

onclicklistener

angular-template

angular

angular-arrays