时间戳

首页 > 解决方案 > Angular - 如何在点击处理程序中访问 nativeElement

angular - Angular - 如何在点击处理程序中访问 nativeElement

问题描述

也许只是一个“时尚”，但仍然......

我有以下工作：

// Template
<div *ngFor="let media of period.media">
    .
    .
    .
    <button #btn (click)="onDeleteClick(btn)" [attr.media-id]="media.ID">
        {{'DELETE' | translate}}
    </button>
</div>

//component.ts
    this.period.media = [
        {id: 123}, {id: 456}, ...
    ];
    .
    .
    .
    onDeleteClick(elem) {
        console.log(elem._elementRef.nativeElement.getAttribute('media-id'));
    }

它可以工作 ( the console shows 123, 456,...)，但使用 _elemntRef 访问 nativeElelement 听起来像一个 hack（下划线表示私有属性，如 _privateVar，不是吗）。

那么访问 nativeElement 或者甚至更好的 'media-id' 属性的更优雅的方法是什么？

非常感谢任何提示。

编辑

这个问题的答案在user184994和JB Nizet的评论中。由于他们都正确解决了问题，我无法设置“已接受答案”标志，因为它只能分配一次。

因此，我正在编辑我的问题以确认这一点。

标签： angularelementref

解决方案

答案已经给出，但我想再补充一点并回答。您正在使用按钮，对于大多数浏览器，按钮的默认类型是提交。如果尝试删除它将被提交 ，如果您不想要它，您可以将其类型更改为type = "button".

<div *ngFor="let media of period.media">
    <button type = "button" #btn 
  (click)="onDeleteClick(media)"
   [attr.media-id]="media.ID">{{'DELETE' | translate}}</button>
</div>

另外，如果您愿意，您可以只在需要或想要的情况下传递 id ，就onDeleteClick(media.id) 性能而言，使用它会更好。如果不需要，可以删除模板变量。
//组件.ts

this.period.media = [
    {id: 123}, {id: 456}, ...
];
.
.
.
onDeleteClick(media) {
    console.log(media.id);
}

如果您只传递 id 则需要更改语法

  onDeleteClick(id) {
        console.log(id);

    }

推荐阅读