Angular 7和Flex Layout 7.0.0-beta.24

Question

我将项目升级到Angular 7，并使用Flex Layout 7.0.0-beta.24。 而且我注意到有些问题是我以前没有遇到过的。

当我打开一个元素时，所有内部元素都是内联的（之前），应显示在列中。关闭并打开元素，然后将元素按预期的方式堆叠在列中。

我尝试更改css中元素的高度，因为我读到这可能是原因，但事实并非如此。由于该项目使用的是以前的版本，因此我不想跳入并进行更改，以防万一这是一个错误，并且会在新版本中修复。

有人遇到类似的事情吗？

Answer 1

您是否尝试过将其添加到导入中？

FlexLayoutModule.withConfig({
  useColumnBasisZero: false,
  addFlexToParent: false,
}),

Answer 2

我设法通过添加一个包含我的flex-layout的额外div来解决此问题，但我不完全确定为什么这可以解决此问题。当在后台检索消息时，将显示加载程序框。造成布局问题。

修复

<div class="loader-box" *ngIf="window.isLoadingHistory">
                <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100%">
                    <mat-spinner class="ele-text-color-grey" [mode]="'indeterminate'" [diameter]="50" strokeWidth="5">
                    </mat-spinner>
                    <p mat-caption class="ele-text-color-grey">Loading history...</p>
                </div>
            </div>

原文：

<div class="loader-box" fxLayout="column" fxLayoutAlign="center center" fxFlex="100%" *ngIf="window.isLoadingHistory">
                <mat-spinner class="ele-text-color-grey" [mode]="'indeterminate'" [diameter]="50" strokeWidth="5">
                </mat-spinner>
                <p mat-caption class="ele-text-color-grey">Loading history...</p>
            </div>