为了让Angular Material的MatDialog支持可访问性,需要将以下示例代码添加到MatDialog的组件中:
import { Component, OnInit, Inject, ViewChild, AfterViewInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-example-dialog',
templateUrl: './example-dialog.component.html',
styleUrls: ['./example-dialog.component.scss']
})
export class ExampleDialogComponent implements OnInit, AfterViewInit {
@ViewChild('dialogTitle') dialogTitle: any;
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
ngOnInit() {
}
ngAfterViewInit() {
this.dialogRef.afterOpened().subscribe(_ => {
this.dialogTitle.nativeElement.focus();
});
}
}
在上面的代码中,我们可以看到:
afterOpened()
方法订阅对话框打开事件。nativeElement
获取对话框标题,并在其上聚焦以支持可访问性。在以上示例代码中,我们可以根据自己的需求进行一些更改以适应我们的应用程序。