如何在打字稿类中将 mat-stroked-button 更改为 mat-button？答案

【问题标题】：how to change mat-stroked-button to mat-button in typescript class?如何在打字稿类中将 mat-stroked-button 更改为 mat-button？
【发布时间】：2019-02-01 10:48:32
【问题描述】：

我有一个材质按钮 mat-stroked-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-stroked-button

【问题讨论】：

如何创建两个按钮块并使用 *ngIf 基于变量（例如 smallUI）更改哪个按钮可见？
我的第一个猜测是做[attr.mat-stroked-button]="condition" 不幸的是它似乎不起作用。所以我建议你使用@hamilton.lima 的解决方案。
@Ploppy 那是因为 mat-stroked-button 被声明为指令。

标签： angular angular-material

【解决方案1】：

一种简单的方法是创建一个变量（例如，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。

【讨论】：