Как я могу получить доступ к расширенному значению арии кнопки?

Question

Как я могу получить доступ к свойствам кнопки из прослушивателя кликов? Я хочу получить доступ к aria-extended, чтобы установить некоторые значения; вот что я получил.

x. html

<button class="btn btn-secondary" (click)="customSearch($event.target)" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">Search</button>

x.ts

  customSearch(e){
    console.log("some event--->",e);
  }

результат

Answer 1

Поскольку вы уже передаете объект dom в качестве параметра, вы можете напрямую получить его атрибут, используя метод getAttribute

 customSearch(buttonDOM) {
    console.log("some event--->", buttonDOM.getAttribute('aria-expanded'));
  }

Answer 2

Я рекомендую вам создать директиву, которая изменяет вашу кнопку, это пример

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
@Directive({
    selector: '[aextended]'
})
export class AextendedDirective {
    constructor(private el: ElementRef, private renderer: Renderer) {

    }
    @HostListener('click') onClick() {
     this.el.nativeElement.setAttribute('aria-expanded','true');
    }
}

, а затем в вашем шаблоне

<button aextended class="btn btn-secondary" (click)="customSearch($event.target)" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="true" aria-controls="collapseForm">Search</button>

это stackblitz рабочего случая

если вы действительно хотите установить его с контроллера, вы можете сделать это

  customSearch(el){
    el.setAttribute('aria-expanded','true')
  }