如何获取Angular Material按钮的大小？ （AM版本>7.2）

Question

使用 Angular Material（版本 > 7.2.2）时：Angular Material 团队删除了（之前可用的）全局可访问的 CSS 自定义属性“--mdc-icon-button-state-layer-size”。

AFAIK，现在不可能再知道 Angular Material 中按钮的大小了。还有其他方法可以知道材质按钮的大小吗？ （我觉得有点羞于使用 Angular Material，现在我不得不问这样的问题）。

我已经在 GitHub 上问过这个问题（https://github.com/angular/components/issues/28738）；但我得到的只是谷歌员工的一个偏离主题的回答，问题被关闭了，它似乎已经被删除，在沙发后面，进入了谷歌的空白。

我期望获得 Angular Material Button 的大小。

Answer 1

您可以使用

getBoundingClientRect

来获取按钮的大小。

1. 向要获取其大小的按钮添加模板变量。
2. 使用

   viewChild

   或

   @ViewChild

   获取按钮。
3. 使用

   getBoundingClientRect()

   上的

   nativeElement

   获取尺寸。

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule],
  template: `
    <button #btn mat-flat-button color="primary">My Button</button>
  `,
})
export class App {
  btn = viewChild('btn', { read: ElementRef });

  ngAfterViewInit() {
    const rect = this.btn()?.nativeElement.getBoundingClientRect();
    console.log(rect);
  }
}