Question

我正在使用Angular v6.0.3和材料v6.1.0＆amp; flexLayout v6.0.0-beta.15，我有一个奇怪的问题，我从相同的角度html代码中获得不一致的行为（在dev build＆amp; prod build中）：

<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像素。有时会显示它们没有间隙（两个按钮相互接触）

如果我在多个标签中运行，这种不同的行为会在同一个版本中发生，我无法理解为什么会发生这种情况。

正常工作时的输出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>

感谢任何帮助

Answer 1

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

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

角度材料fxlayoutgap给出不一致的输出（有时不起作用）

1 个答案: