我怎样才能以角度的形式得到一个组件的宽度和高度？

Question

我为我的angular表单中的表单输入元素设计了一个加载组件，以便在从api加载字段时显示。这里，我必须向< code>app-loader组件提供组件的高度和宽度，以便它可以相应地占用空间。

现在我所做的是使用手动开关

到目前为止，我有如下所示。

<ng-container
  *ngIf="!formInput.loaded"
  [ngSwitch]="formInput.type">
  <div *ngSwitchCase="FORM_INPUT_TYPE.CHECKBOX">
    <app-loader width="409" height="24"></app-loader>
  </div>
  <div *ngSwitchCase="FORM_INPUT_TYPE.IMAGE_DROP_AREA">
    <app-loader width="414.66" height="96"></app-loader>
  </div>
  <div *ngSwitchCase="FORM_INPUT_TYPE.RATING">
    <app-loader width="409" height="30"></app-loader>
  </div>
  <div *ngSwitchDefault>
    <app-loader width="645" height="39.75"></app-loader>
  </div>
</ng-container>

Answer 1

注入元素ref组件的反对

...
private elem: ElementRef,
...

然后你可以通过this.elem.nativeElement获得原生元素。然后，您可以通过 offsetHeight 和 offsetWidth 获得高度和宽度。如果你想要一个特定的 div，只需使用 @ViewChild（） 并执行相同的操作。

提示： 通常你会在ngOnInit中检索高度和宽度。但是，根据您的具体情况，您可能希望在 ngAfterViewInit 中执行此操作，或者使用 @HostBinding（） 指令订阅滚动事件。