如何在打字稿类中将垫击按钮更改为垫按钮？

Question

我有一个实质性的按钮垫击按钮，如下所示：

<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，如何将其更改为“垫按钮”，否则将其保留为“垫击按钮”

Answer 1

一种简单的方法是创建一个变量（例如useStroked），然后将*ngIf与两个不同的“材质”按钮组件一起使用：

<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。