Angular - Как получить доступ к nativeElement в обработчике кликов - PullRequest
Новая
       19

Angular - Как получить доступ к nativeElement в обработчике кликов

0 голосов
/ 27 мая 2018

Может быть, только "стильный", но тем не менее ...

У меня работает следующее: 

// 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,...), но получает доступ к nativeElelement с помощью_elemntRef звучит как хак (подчеркивание обозначает частную собственность, как _privateVar, не правда ли).

Так что может быть более элегантным способом доступа к nativeElement или, что еще лучше, к его медиа-идентификаторуатрибут?

Большое спасибо за любую подсказку.

РЕДАКТИРОВАТЬ

Ответ на этот вопрос в комментариях от user184994 и Дж. Б. Низет .Так как они оба решили проблему правильно, я не могу установить флаг «принятый ответ», так как он может быть назначен только один раз.

Поэтому я редактирую свой вопрос как подтверждение этого.

1 Ответ

0 голосов
/ 28 мая 2018

Ответ уже дан, но я хотел бы добавить еще одно замечание и ответить на него.Вы используете кнопку, для большинства браузеров тип кнопки по умолчанию - submit. и , если попытаться удалить, она будет отправлена ​​, если вы не хотите, вы можете изменить его тип на 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) , это лучше с точки зрения производительности .Вы можете удалить шаблон varibale, если он вам не нужен.
//component.ts

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

, если вы передаете только идентификатор, необходимо изменить синтаксис, например 

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

    }
...