【问题标题】:How can I access aria-expanded value of a button如何访问按钮的 aria 扩展值
【发布时间】:2020-06-15 00:13:18
【问题描述】:

如何从点击监听器访问按钮属性?我想访问 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);
  }

结果

【问题讨论】:

  • 你试过this.getAttribute("aria-expanded")吗?

标签: javascript html angular typescript bootstrap-4


【解决方案1】:

我建议您创建一个修改按钮的指令,这是一个示例

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')
  }

【讨论】:

    【解决方案2】:

    由于您已经将 dom 对象作为参数传递,您可以使用 getAttribute 方法直接获取其属性

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多