在angular中添加涉及标志和媒体查询的类

import { Directive, HostListener, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appAddClassOnClick]'
})
export class AddClassOnClickDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('click') onClick() {
    this.renderer.addClass(this.el.nativeElement, 'highlight');
  }
}

@media screen and (max-width: 600px) {
  .mobile {
    color: red;
  }
}

<button [ngClass]="{ 'mobile': isMobile }">Mobile Button</button>

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-my-component',
  template: `
    <button [ngClass]="{ 'mobile': isMobile }">Mobile Button</button>
  `,
  styles: [`
    .mobile {
      color: red;
    }
  `]
})
export class MyComponent {
  isMobile: boolean;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }
}