访问 MatButton 内的 elementRef。角6

Question

我正在尝试获取元素的边界。它与 div 配合得很好，但是当我尝试对带有角度材质指令的按钮执行相同操作时，我得到了 MatButton 对象，并且无法在其上使用 getBoundingClientRect 。我可以做我需要做的事情来获取 div 的边界，但是按钮的边界会不那么麻烦，因为它不会在应用程序的生命周期中改变大小。

模板摘录：

<div #container>
<button #button mat-flat-button>Button</button>

类摘录

@ViewChild('button') button : ElementRef;
@ViewChild('container') container : ElementRef;

checkBoundaries():void [
    const buttonRect = this.button.nativeElement.getBoundingClientRect();
    const containerRect = this.container.nativeElement.getBoundingClientRect();
    console.log(button);
    console.log(container);
}

我从日志中得到的内容

MatButton {_elementRef: ElementRef, _disableRipple: false, _disabled: false, _platform: Platform, _focusMonitor: FocusMonitor, …}

ElementRef {nativeElement: div}

当尝试在按钮行上调用 getBoundingClientRect 时，出现以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')

我将不胜感激的指导

Answer 1

使用 static 属性并将其设置为 true：

@ViewChild('button' , {read: ElementRef, static: true}) private button : ElementRef;