mat-icon-button 和 mat-button 之间的角度材质切换答案

【问题标题】：Angular material switch between mat-icon-button and mat-buttonmat-icon-button 和 mat-button 之间的角度材质切换
【发布时间】：2018-07-31 15:52:12
【问题描述】：

根据媒体查询，有没有更漂亮的方式在 mat-icon-button 和 mat-button 之间切换？我已经对我当前的解决方案做了一个演示，但它需要两个独立的按钮。

<button type=button mat-icon-button fxHide fxShow.lt-sm (click)="onEdit($event)">
  <mat-icon>edit</mat-icon>
</button>
<button type="button" mat-button fxHide.lt-sm (click)="onEdit($event)">
  <mat-icon>edit</mat-icon> Edit
</button>

DEMO

【问题讨论】：

可以只显示一个按钮。在您的打字稿代码中使用ObservableMedia 设置一个标志，根据屏幕大小添加适当的按钮属性。
你的意思是像THIS吗？这不起作用。
ObservableMedia 是 Observable 的包装器，因此在您订阅它之前它什么都不做。看看这个例子，它准确地描述了你需要什么：github.com/angular/flex-layout/wiki/…

标签： angular responsive-design angular-material angular-flex-layout

【解决方案1】：

遇到同样的问题，目前正在使用这个解决方案。

组件.html：

<button
        mat-button
        [ngClass]="isBigDevice() ? 'mat-stroked-button' : 'mat-icon-button'"
        color="accent"
        type="button"
        (click)="coolMethodToDoStuff()"
        [disabled]="isSelected() && contextTypeIsSomething()">
    <span *ngIf="isBigDevice()">Edit</span>
    <mat-icon *ngIf="!isBigDevice()">edit</mat-icon>
</button>

有问题/注解：需要添加基础按钮样式/属性mat-button。如果你不这样做，你会得到一个错误，color is no property for this kind of html-element。优点是，如果您在一个按钮上有多个属性或disabled、hidden 或*ngIf 的条件，则不需要它们两次。我知道*ngIf缺乏可读性，但目前这是避免大量重复代码的最佳方法。

对我来说下一步：我将为这样的事情构建一个指令。

编辑：

更多的是我的 MediaQueryService：

import {Injectable, OnDestroy} from '@angular/core';
import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})

export class MediaQueryService implements OnDestroy {

private _breakpointArray = {
    isXSmall: false,
    isSmall: false,
    isMedium: false,
    isLarge: false,
    isXLarge: false,
};
private _destroy$ = new Subject();

constructor(
    private _breakpointObserver: BreakpointObserver,
) {
    this._breakpointObserver
        .observe([
            Breakpoints.WebLandscape,
            Breakpoints.WebPortrait,
        ])
        .pipe(
            takeUntil(this._destroy$)
        )
        .subscribe((state: BreakpointState) => {
            _breakpointObserver.isMatched(Breakpoints.WebLandscape)
                ? this.webOrientationChangeLogger('landscape')
                : this.webOrientationChangeLogger('portrait');
        });

    this._breakpointObserver.observe([
            Breakpoints.XSmall,
            Breakpoints.Small,
            Breakpoints.Medium,
            Breakpoints.Large,
            Breakpoints.XLarge,
        ]
    )
        .pipe(
            takeUntil(this._destroy$)
        )
        .subscribe((state: BreakpointState) => {
            this._breakpointArray.isXSmall = _breakpointObserver.isMatched(Breakpoints.XSmall);
            this._breakpointArray.isSmall = _breakpointObserver.isMatched(Breakpoints.Small);
            this._breakpointArray.isMedium = _breakpointObserver.isMatched(Breakpoints.Medium);
            this._breakpointArray.isLarge = _breakpointObserver.isMatched(Breakpoints.Large);
            this._breakpointArray.isXLarge = _breakpointObserver.isMatched(Breakpoints.XLarge);
        });
}

public ngOnDestroy(): void {
    this._destroy$.next();
    this._destroy$.complete();
}

public get isSmallDevice(): boolean {
    return this.getBreakpointBoolean('isXSmall') || this.getBreakpointBoolean('isSmall');
}

public get isBigDevice(): boolean {
    return this.getBreakpointBoolean('isXLarge') || this.getBreakpointBoolean('isLarge');
}

public getBreakpointBoolean(breakpointName: string): boolean {
    return this._breakpointArray[breakpointName];
}

private webOrientationChangeLogger(orientation: string) {
    console.log(orientation);
}

}

在我使用按钮的组件内部，我只需调用isBigDevice() 方法并返回布尔值。

组件.ts：

public isBigDevice(): boolean {
    return this._mediaQueryService.isBigDevice();
}

您也可以尝试使用角材料的fxShow、fxHide 属性。

【讨论】：

【解决方案2】：

试试

<button mat-button [ngClass]="condition ? 'mat-raised-button' : 'mat-icon-button'">Button</button>

【讨论】：