Angular CDK布局-如何在项目中全局包含BreakPointObserver

npm install @angular/cdk

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

@Component({
  ...
})
export class YourComponent implements OnInit {
  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit() {
    // 在这里使用BreakPointObserver进行屏幕尺寸变化的监测和布局规则的应用
  }
}

ngOnInit() {
  this.breakpointObserver.observe([
    Breakpoints.Handset, // 手机屏幕
    Breakpoints.Tablet, // 平板屏幕
    Breakpoints.Web // 大屏幕
  ]).subscribe(result => {
    if (result.breakpoints[Breakpoints.Handset]) {
      // 应用手机屏幕的布局规则
    }
    if (result.breakpoints[Breakpoints.Tablet]) {
      // 应用平板屏幕的布局规则
    }
    if (result.breakpoints[Breakpoints.Web]) {
      // 应用大屏幕的布局规则
    }
  });
}