如何訪問按鈕的 aria-expanded 值

Question

如何從單擊偵聽器訪問按鈕屬性？ 我想訪問 aria-expanded 來設置一些值； 這是我得到的。

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>

這是一個工作案例的堆棧閃電戰

如果你真的想從控制器設置它，你可以這樣做

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