如何在Angular中根据屏幕大小设置不同的cssclass？

Question

我的 Angular 应用程序中有这个浮动按钮，

  <button [ngClass]="{
  'mdc-fab--extended': extendedClass,
  'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch    ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>

当屏幕尺寸为 768px 或更低时，我需要将 mdc-fab--extended className 更改为 mdc-fab--mini 吗？我该怎么做才能实现此功能？谢谢

我试过了，但是类没有 removed/added

    if (window.innerWidth < 768) {
  this.miniClass = true;
  this.extendedClass = false;
} else {
  this.miniClass = false;
  this.extendedClass = true;
}

Answer 1

组件：

classFlag = false;
ngOnInit(){
  if (window.innerWidth <= 768) {
    this.classFlag = true;
  } else {
    this.classFlag = false;
  } 
 }

HTML :

<button class="mdc-fab  mdc-fab--touch"
  [ngClass]="classFlag ? 'mdc-fab--extended' : 'mdc-fab--mini'">
</button>

调整大小时触发 WINDOW 或浏览器检查这个：

Answer 2

您可以将 hostlistener 添加到您的组件中。

public size700_1020 = false;
public size400_700 = false;

@HostListener('window:resize', ['$event'])
onResize(event) {
   alert(window.screen.availWidth);
   alert(window.screen.availHeight);

   if(window.innerWidth < 700 && window.innerHeight < 1020) {
       // now based on the screen size you want to check 
       // enable the variable and make it true
       // based on it, you can enable the class in template
   } 
}

在模板中：

<div class="size700_1020 ? 'addThisClass' : 'elseThis'"></div>

您对 window 对象的要求有多个属性。我附上了一些链接，这些链接可能会为您提供更多方法 here1 and 。

你也可以这样做。

import { Platform } from 'ionic-angular';

...
private width:number;
private height:number;

constructor(private platform: Platform){
    platform.ready().then(() => {
        this.width = platform.width();
        this.height = platform.height();
    });
}

根据问题所做的更改：

  <button [ngClass]="miniClass ? 'addMiniClass':'extendedClass'" class="mdc-fab mdc-fab--touch    ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>

Answer 3

Component.ts

    classFlag = false;
    ngOnInit(){
     if (screen.width <= 768) {
      this.classFlag = true;
    } else {
      this.classFlag = false;
    } 
  }

HTML

<button class="mdc-fab  mdc-fab--touch"
  [ngClass]="classFlag ? 'mdc-fab--extended' : 'mdc-fab--mini'">
</button>

尝试 screen.width 而不是 window.innerWidth

如何在Angular中根据屏幕大小设置不同的cssclass？

How to set different css class based on screen size in Angular?

ng-class

angular2-template

angular