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

Posted 2023-03-05

【中文标题】如何在 Angular 中根据屏幕大小设置不同的 CSS 类？

【英文标题】：How to set different css class based on screen size in Angular?

【发布时间】：2021-12-23 16:19:19

【问题描述】：

我的 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>

当屏幕尺寸为 768 像素或更低时，我需要将 mdc-fab--extended className 更改为 mdc-fab--mini 吗？ 我能做些什么来实现这个功能？ 谢谢

我已经尝试过了，但没有删除/添加类

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

【问题讨论】：

你正在考虑调整窗口大小？？

您的模板中的表达式写得不正确。我将其添加到答案中。

【参考方案1】：

您可以将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和here2。

你也可以这样做。

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>

【参考方案2】：

组件.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

【参考方案3】：

组件：

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>

在调整窗口或浏览器大小时触发 检查这个：https://***.com/a/49917082/11492378

【讨论】：

我已经尝试过了，但是当宽度

您是否通过调整浏览器大小来检查它？

是的，我打开了检查器，并且浏览器的宽度为 768 像素或更小，它仍然是相同的 mdc-fab--扩展类而不是 mdc-fab--mini 类

您需要附加主机侦听器，并在此基础上添加类。如果这有任何意义，请检查我的回答。

否，那么您需要使用HostListener 进行事件。喜欢@Apoova 回答