代码之家 › 专栏 › 技术社区 › Strider

将两个元素设置为相同高度

ionic4 ionic-framework angular

0

Strider · 技术社区 · 5 年前

我有一个元素试图设置为与另一个元素相同的高度,其中后一个元素使用 *ngIf 指令:

<!-- HTML code -->
<my-custom-component #notificationBar *ngIf="notificationMessage">
</my-custom-component>

<ion-content>
  <div style="background: red; width: 100%;"
    [style.height]="notificationBar && notificationBar.nativeElement.offsetHeight">
  </div>
  <!-- .... -->
</ion-content>


//*.ts code
@ViewChild("notificationBar") notificationBar: ElementRef;

我面临的问题是 ExpressionChangedAfterItHasBeenCheckedError

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: undefined'. Current value: 'height: 0'.

有没有其他合适的方法将这两个元素设置到相同的高度?

谢谢

0 回复 | 直到 5 年前

1

2

ConnorsFan 5 年前

通知栏的高度可以通过属性getter获得。当高度改变时,打电话 ChangeDetectorRef.detectChanges div 元素。

@ViewChild("notificationBar") private notificationBarRef: ElementRef<HTMLElement>;

private _notificationBarHeight: number = null;

public get notificationBarHeight(): number {
  const height = this.notificationBarRef ? this.notificationBarRef.nativeElement.offsetHeight : null;
  if (Math.abs(height - this._notificationBarHeight) > 0.1) {
    this._notificationBarHeight = height;
    this.changeDetectorRef.detectChanges();
  }
  return this._notificationBarHeight;
}

在模板中,设置 分区 以像素为单位的元素 [style.height.px] 结合:

<div ... [style.height.px]="notificationBarHeight">
</div>

this stackblitz 为了演示。