Question

我正在构建一个可重复使用的导航＆＃34;标签＆＃34;我想将所选标签设置为＆＃34; true＆＃34;对于aria - 在点击时选择，但是aria-selected对于所有三个选项卡在点击时保持为false。如果单击选项卡，如何将其设置为true？

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tabs = [
    { tabName: 'tab1' },
    { tabName: 'tab2' },
    { tabName: 'tab3' }
  ]
  selected: boolean;

  select(tab){
    this.selected = tab.tabName
  }
}

app.component.html

<div role="tablist">
  <app-tabs 
  *ngFor="let tab of tabs" 
  (click)="select(tab)"
  [selected]="selected" 
  [tab]="tab">
  </app-tabs>
</div>

tabs.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  @Input() tab
  @Input() selected

}

tabs.component.html

<span 
role="tab" 
(click)="handleSelected($event)" 
aria-selected="tab.tabName === selected">
  {{tab.tabName}}
</span>

Answer 1

使用[attr.aria-selected]="tab.tabName === selected"代替aria-selected="tab.tabName === selected"。前者绑定到组件类的属性，后者只是传递文字值

在Angular

1 个答案: