Angular 7 和 Flex 布局 7.0.0-beta.24

Question

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

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

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

有人遇到过类似的事情吗？

Answer 1

我设法通过添加一个额外的 div 来解决这个问题，其中包含我的 flex-layout，但我不完全确定为什么这解决了这个问题。在后台检索消息时会显示加载器框。它导致了布局问题。

修复

<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>

Answer 2

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

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

Angular 7 和 Flex 布局 7.0.0-beta.24

Angular 7 and Flex Layout 7.0.0-beta.24

angular-flex-layout

angular