遇到同样的问题,目前正在使用此解决方案。
组件.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>
有一个问题/注释:您需要添加基本按钮 style/property mat-button
。如果你不这样做,你会得到一个错误,color
它不是这种 html 元素的属性。优点是,如果您在一个按钮或条件上有多个属性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
属性。