[英]How can I access aria-expanded value of a button
How can I access button properties from click listener?如何从单击侦听器访问按钮属性? I want to access aria-expanded to set some values;
我想访问 aria-expanded 来设置一些值; here is what I got.
这是我得到的。
x.html 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 x.ts
customSearch(e){
console.log("some event--->",e);
}
result结果
As you are already passing the dom object as parameter you could directly get its attribute using getAttribute method由于您已经将 dom 对象作为参数传递,您可以使用 getAttribute 方法直接获取其属性
customSearch(buttonDOM) { console.log("some event--->", buttonDOM.getAttribute('aria-expanded')); }
I recommend you to create a directive that modifies your button this is an example我建议您创建一个修改按钮的指令,这是一个示例
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');
}
}
and then in your template然后在你的模板中
<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>
this is a stackblitz of a working case这是一个工作案例的堆栈闪电战
if you really want to set it from controller you can do this如果你真的想从控制器设置它,你可以这样做
customSearch(el){
el.setAttribute('aria-expanded','true')
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.