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

Question

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

我有以下工作：

// 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 的 cmets 中。由于他们都正确解决了问题，我无法设置“已接受答案”标志，因为它只能分配一次。

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

Answer 1

答案已经给出，但我想再补充一点并回答。 您正在使用按钮，对于大多数浏览器，按钮的默认类型是提交。 如果尝试删除它将被提交，如果您不想要它，您可以将其类型更改为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) 这在性能方面更好。如果不需要，可以删除模板变量。
//component.ts

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

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

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

    }