Angular Flex & Material: 根据屏幕大小隐藏按钮属性

Question

是否可以使用 Angular Flex & Material 根据屏幕尺寸显示/隐藏 <button> 标签的某些属性？

像这样的东西（不幸的是不起作用）：

 <button [fxFlex.lg]="'mat-raised-button'"
         [fxFlex.md]="'mat-icon-button'"
        (click)="new()">
    ...
</button>

Answer 1

我不知道 material 或者 fxFlex 在做什么。但是如果你得不到任何其他帮助，你可以使用 pure css 或 scss

<button [fxFlex]="'mat-raised-button'" id="button1" (click)="new()">...</button>
<button [fxFlex]="'mat-icon-button'" id="button2" (click)="new()">...</button>

和

@media (min-width: 1000px) { //lg 
    #button2 {
      display:none;
    }
}
 @media (max-width: 1000px) { //md 
    #button1{
      display:none;
    }
}

Answer 2

flex-layout 库有一个 responsive documentation，您可以在其中找到那些属性：

[fxHide.md]
[fxShow.md]

等等。

您可以根据库定义的断点将它们用于 show/hide 个元素；或根据需要创建自己的断点。

Here is an example 和相关代码：

<button [fxHide.xs]="true" [fxHide.md]="true">I'm only displayed on small screen width !</button>

Answer 3

继我的第一个回答之后，这个回答是要告诉您，仅使用 fxFlex 无法在模板上有条件地应用指令。

然而，适合您的问题的是 fxFlex 库具有 ngClass 扩展名，它允许您将类应用于元素。

In this example，你可以看到它正在运行。您所要做的就是应用正确的类（来自 material 库）使其工作。

虽然不是最优的，但它完成了工作。我仍然会建议使用两个按钮中的任何一个，这在库使用方面更干净。

Angular Flex & Material: 根据屏幕大小隐藏按钮属性

Angular Flex & Material: hide button attribute based on size of screen

angular-material

angular-flex-layout

angular