使用 [ngClass.gt-xs] 指令

当我们需要根据设备宽度在模板中添加不同的样式时，就可以使用 ngClass.gt-xs 指令。该指令只有在设备屏幕宽度大于等于 >= 600px 时才会应用添加的类。

在模板中使用

在模板中使用 ngClass.gt-xs 指令，需要将其添加到某个 DOM 元素上，并设置要添加的类名，如下所示：

<div [ngClass.gt-xs]="'my-class'"></div>

上述代码中，我们将 ngClass.gt-xs 指令绑定到了一个 div 元素上，同时设置了要添加的类名为 my-class。

如果需要添加多个类名，可以使用数组来设置，如下所示：

<div [ngClass.gt-xs]="['class1', 'class2']"></div>

上述代码中，我们将 ngClass.gt-xs 指令绑定到了一个 div 元素上，并设置要添加的两个类名为 class1 和 class2。

在组件中使用

在组件中使用 ngClass.gt-xs 指令，只需要在组件的模板中添加即可，如下所示：

<div [ngClass.gt-xs]="myClass"></div>

上述代码中，我们将 ngClass.gt-xs 指令绑定到了一个 div 元素上，并使用了一个组件属性 myClass。

在组件中，我们可以在 ngOnInit 生命周期钩子函数中，根据设备屏幕宽度设置 myClass 的值，如下所示：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div [ngClass.gt-xs]="myClass"></div>'
})
export class MyComponent implements OnInit {
  myClass: string;

  ngOnInit() {
    if (window.innerWidth >= 600) {
      this.myClass = 'class1 class2';
    } else {
      this.myClass = '';
    }
  }
}

上述代码中，我们在 ngOnInit 函数中获取了当前设备的屏幕宽度，并根据宽度值设置了 myClass 属性的值。

结论

通过使用 ngClass.gt-xs 指令，我们可以根据设备屏幕宽度在模板中添加不同的样式，从而实现更好的响应式设计。