Question

我正在使用版本为8的角材创建进度条，并希望向其添加aria标签，因此当我将鼠标悬停在其上时，它会显示进度条的值和说明

Answer 1

您必须使用matTooltip来查看值和说明。

尝试一下：

<mat-progress-bar 
  name="label"
  mode="determinate" 
  [value]="value"
  attr.aria-label="Progress - {{ value }} %"
  matTooltip="Progress - {{ value }} %">
</mat-progress-bar>

在您的组件类中：

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

/**
 * @title Determinate progress-bar
 */
@Component({
  selector: 'progress-bar-determinate-example',
  templateUrl: 'progress-bar-determinate-example.html',
  styleUrls: ['progress-bar-determinate-example.css'],
})
export class ProgressBarDeterminateExample {
  value = 0;
  intervalId;

  ngOnInit() {
    this.intervalId = setInterval(() => {
      if (this.value < 100) this.value = this.value + 20;
    }, 5000);
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

将aria标签添加到角材8的mat-progress-bar中的正确方法是什么？

1 个答案: