根据分辨率更改 Angular material 按钮样式

Question

如果屏幕很小，我需要从我的按钮中删除文本。我使用 Flex API 做到了这一点。我还需要将按钮样式从 "mat-raised-button" 更改为 "mat-mini-fab"。如何使这个按钮属性成为条件？ ex on small screen 属性 "mat-mini-fab" 应该应用 else "mat-raised-button"。在这里更喜欢使用 Flex API，例如用于元素的 fxShow fxHide。

 <button matTooltip="Save" mat-raised-button (click)="saveMember()" color="accent" class="submit-button" aria-label="SAVE" [disabled]="memberForm.invalid">
          <mat-icon>save</mat-icon><span fxHide fxShow.gt-sm>SAVE</span>
 </button>

Answer 1

mat-raised-button 和 mat-mini-fab 是指令（实际上它们是指令选择器的一部分），并且指令不能是有条件的。您唯一的选择是为每个 directive/type 屏幕尺寸设置不同的按钮元素，并使用 flex api 相应地显示或隐藏它们。例如：

<button mat-raised-button fxHide fxShow.gt-sm>
    <mat-icon>save</mat-icon>
    SAVE
</button>
<button mat-mini-fab fxShow fxHide.gt-sm>
    <mat-icon>save</mat-icon>
</button>

根据分辨率更改 Angular material 按钮样式

Change Angular material button style based on the resolution

flexbox

angular-material-5