我有一个 Material 按钮 mat-lines-button 如下:
<button mat-stroked-button color="accent" class="mat-login-header">Login</button>
如果用户使用较小的屏幕尺寸或分辨率(例如移动屏幕),我需要按钮将其类型更改为 mat-button,因此在组件构造函数中我正在尝试:
constructor() {
if(document.body.clientWidth < 600) {
//how to change the button from mat-stroked-button to mat-button?
}
}
那么,如果文档宽度小于 600,如何将其更改为 mat-button,否则保留 mat-striked-button
最佳答案
一种简单的方法是创建一个变量(例如 useStroked
),然后将 *ngIf
与两个不同的 Material 按钮组件一起使用:
<button *ngIf="useStroked" mat-stroked-button color="accent" class="mat-login-header">Login</button>
<button *ngIf="!useStroked" mat-button color="accent" class="mat-login-header">Login</button>
然后,您需要在 TS 类中设置该变量(有关示例,请参阅 this answer )。
我创建了一个示例 StackBlitz here .
关于angular - 如何在 typescript 类中将 mat-lines-button 更改为 mat-button ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52030138/