Angular 7 和 Flex 布局 7.0.0-beta.24答案

【问题标题】：Angular 7 and Flex Layout 7.0.0-beta.24Angular 7 和 Flex 布局 7.0.0-beta.24
【发布时间】：2019-04-17 11:14:33
【问题描述】：

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

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

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

有人遇到过类似情况吗？

【问题讨论】：

标签： angular angular-flex-layout

【解决方案1】：

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

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

【讨论】：

谢谢，这很好用！尝试单独更改每个问题是一种更好的方法。他们一定改变了配置。
如果您不介意将我的答案标记为正确，我将不胜感激！

【解决方案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>

【讨论】：