时间戳

首页 > 解决方案 > 角度材料 fxlayoutgap 提供不一致的输出（有时不工作）

angular - 角度材料 fxlayoutgap 提供不一致的输出（有时不工作）

问题描述

我正在使用带有材料 v6.1.0 和 flexLayout v6.0.0-beta.15 的 Angular v6.0.3，我有一个奇怪的问题，我从相同的 Angular html 代码中得到不一致的行为（在开发构建和产品构建中）：

<div fxLayout="row" fxLayoutGap="20px">
  <button mat-button matStepperPrevious class="btn  btn-primary gray">{{'Back' | translate}}</button>
  <button mat-button matStepperNext class="btn  btn-primary pull-right"
  [hidden]="..."
    (click)="...">
    {{'Next' | translate}}
  </button>
</div>

上面的代码有时会显示两个按钮，它们之间的所需间隙为 20 px，有时会显示它们没有间隙（两个按钮相互接触）

如果我在多个选项卡中运行它，这种不同的行为会发生在同一个构建中，我根本不明白为什么会发生这种情况。

在正常工作的情况下输出html代码：

<div _ngcontent-c2="" fxlayout="row" fxlayoutgap="20px" ng-reflect-layout="row" ng-reflect-gap="20px" style="flex-direction: row; box-sizing: border-box; display: flex;"
class="ng-star-inserted">
<button _ngcontent-c2="" class="btn  btn-primary gray" mat-button="" matstepperprevious="" type="button" style="margin-right: 20px;">Back</button>
<button _ngcontent-c2="" class="btn  btn-primary pull-right" mat-button="" matsteppernext="" type="submit">
Next </button>

在没有间隙的另一种情况下：

<div _ngcontent-c2="" fxlayout="row" fxlayoutgap="20px" ng-reflect-layout="row" ng-reflect-gap="20px" style="flex-direction: row; box-sizing: border-box; display: flex;"
    class="ng-star-inserted">
    <button _ngcontent-c2="" class="btn  btn-primary gray" mat-button="" matstepperprevious="" type="button" style="">Back</button>
    <button _ngcontent-c2="" class="btn  btn-primary pull-right" mat-button="" matsteppernext="" type="submit">
    Next </button>
</div>

任何帮助表示赞赏

标签： angularangular6angular-flex-layout

解决方案

我希望这对其他人有帮助，问题似乎与具有[hidden]属性的字段有关，当我用 div 中的项目替换隐藏属性时，*ngIffxlayoutgap 似乎按预期工作。

<div fxLayout="row" fxLayoutGap="20px">
  <button mat-button matStepperPrevious class="btn  btn-primary gray">{{'Back' | translate}}</button>
  <button mat-button matStepperNext class="btn  btn-primary pull-right"
  [hidden]="..."
    (click)="...">
    {{'Next' | translate}}
  </button>
</div>

现在正在运行的新代码是这样的：

<div fxLayout="row" fxLayoutGap="20px">
  <button mat-button matStepperPrevious class="btn  btn-primary gray">{{'Back' | translate}}</button>
<div *ngIf="...">
  <button mat-button matStepperNext class="btn  btn-primary pull-right"
    (click)="...">
    {{'Next' | translate}}
  </button>
</div>
</div>

推荐阅读