在 Angular 中单击时，在选定选项卡上将 aria-selected 设置为 true

Question

我正在构建一个可重用的导航“选项卡”组件，我希望将选定的选项卡设置为“true”，以便单击时选择 aria-selected，但是单击时所有三个选项卡的 aria-selected 保持为 false。如果单击单个选项卡，如何将其设置为 true？

应用程序组件.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
  }
}

应用程序组件.html

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

选项卡组件.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". 前者绑定到组件类的属性，后者只是传递文字值