Angular Flex-Layout 不会从布局行切换到列

Question

我升级到 Angular 9 并尝试使用 FlexLayout。我从 angularjs.org 遵循的布局示例不起作用。 https://material.angularjs.org/1.1.1/layout/container

我的输出格式不正确：

     [first item in row ][first item in column ]
     [second item in row][second item in column]

而不是

    [first item in row ][second item in row][first item in column ]
    [                  ][                  ][second item in column]

为了测试这一点，我创建了一个普通的 vanila angular & material 9 应用，其中包含一个名为 Flexer 的模块。

这是我的 Angular 模板应用程序 flexer.component.html 文件：

    <div layout="row">
        <div class="box1" flex>First item in row</div>
        <div class="box2" flex>Second item in row</div>
    </div>
    <div layout="column">
        <div class="box1" flex>First item in column</div>
        <div class="box2" flex>Second item in column</div>
    </div>

这是我的 vanila angular 应用程序 flexer.component.ts 文件：

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-flexer',
      templateUrl: './flexer.component.html',
      styleUrls: ['./flexer.component.scss']
    })
    export class FlexerComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }

    }

这是我的 flexer flexer.component.scss 样式文件：

    :host {
        display: flex;
        width: 100%;

        .box1 {
            color: black;
            background-color: skyblue;
        }

        .box2 {
            color: white;
            background-color: rgb(78, 47, 255);
        }

    }

这是我的输出

最后我希望我的第二个 div 容器显示在第一个下面，如下所示：

    [first item in row ...                      ]
    [second item in row...                      ]
    [first item in 1scolumn][second item in 2nd column]

感谢任何帮助，抱歉，我没有实时 angular9 演示来展示它，比如 plunker 或 stackblitz，它们还不是第 9 版。

Answer 1

您应该在每个指令layout 和flex 之前添加fx 前缀。

你的模板应该是：

<div fxLayout="row">
  <div class="box1" fxFlex>First item in row</div>
  <div class="box2" fxFlex>Second item in row</div>
</div>
<div fxLayout="column">
  <div class="box1" fxFlex>First item in column</div>
  <div class="box2" fxFlex>Second item in column</div>
</div>

但还要注意，您可以使用 Grid 和 gd 前缀指令：

<div gdColumns="1fr 1fr 1fr">
  <div class="box1" gdColumn="1" gdRow="1">First item in row</div>
  <div class="box2" gdColumn="2" gdRow="1">Second item in row</div>
  <div class="box1" gdColumn="3" gdRow="1">First item in column</div>
  <div class="box2" gdColumn="3" gdRow="2">Second item in column</div>
</div>

在这种情况下，结果会更符合您的期望：

[first item in row ][second item in row][first item in column ]
[                  ][                  ][second item in column]

因为使用Grid，您正在设计一个包含 3 个不同列和 2 个不同行的网格。 根据您期望的结果，可能是一个不错的选择。

重要提示

别忘了将FlexLayoutModule 导入AppModule。

演示

这是Stackblitz demo