angular - 如何在 typescript 类中将 mat-lines-button 更改为 mat-button ?

标签 angular angular-material

我有一个 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/

相关文章:

angular - 在 NX monorepo angular 中运行 ionic 生成页面

angular - 点击时 Material 自动完成不显示列表

javascript - 在页面加载时检查 md-radio-group

javascript - 收到新数据时如何更新 d3 图表

javascript - ionic 框架 3 : Splitting a long article page into small pages

javascript - 无法使用 AngularJS (JavaScript) 设置边距

javascript - 当我使用 Angular Material 和一些自定义代码时如何解决 Angular 应用程序中的 $event 问题

ngFor中的Angular Material扩展面板API,如何自动关闭

Angular 4 - HTTP 服务 404。未找到 JSON 文件

codeigniter - 飞行前响应中的 Access-Control-Allow-Headers 不允许 Angular 2 请求 header 字段授权