Question

我有一个fxFlex="row"，其中有一个button和一个mat-spinner。我希望mat-spinner的大小与button相同（即，使其恰好适合该行）。

当前行为是进度微调器太大。代码：

<div fxLayout="row">
  <button fxFlexAlign="start" mat-stroked-button>Do something</button>
  <mat-spinner *ngIf="loading"></mat-spinner>
</div>

我知道有一个diameter属性，但是我不确定应该使用哪个值设置（如果这是唯一的解决方案）。我希望使解决方案尽可能动态。

Answer 1

如果您不希望div的高度变化太频繁（或者您知道并且可以陷入影响它的任何事件），则可以根据容器高度来动态设置微调器直径，例如这个：

.html

<div #spinnerDiv class="spinner-container">
    <button mat-raised-button color="primary">Do something</button>
    <mat-spinner [diameter]="spinnerDiameter"></mat-spinner>
</div>

.css

.spinner-container {
    display: flex;
    flex-direction: row;
    height: 40px;
}

.ts

spinnerDiameter: number = 1; // Set to a low number to avoid affecting the container height
@ViewChild('spinnerDiv') spinnerDiv: ElementRef;

ngAfterViewInit() {
    // Wrap in a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError
    setTimeout(this.adjustSpinnerSize.bind(this), 100);
}

// Something happens that would cause the div height to change
someEvent() {
    this.adjustSpinnerSize();
}

adjustSpinnerSize() {
    this.spinnerDiameter = this.spinnerDiv.nativeElement.offsetHeight;
}

这只是一个粗略的解决方案，因为我不知道它如何与fxLayout一起使用-您将不得不摆弄CSS-但您知道了。

Flex布局中的Angular Material Progress微调器大小

1 个答案: