Typescript 在简单的媒体查询上使用 Angular Material BreakpointObserver API 有什么好处

发布于05月05日

我一直在试验棱角material ，发现自己质疑在一个简单的媒体查询中使用内置BreakpointObserver API的好处？

或者，与其说它更有益，不如说它真的取决于你想要实现什么？

推荐答案

它通常用于使手机和桌面的页面不同.例如，您可以在JavaScript文件中设置断点并使其对更改做出react .

例如，如果您try 在移动设备上的输入字段中搜索，您可以导航到整个页面，只需让用户在桌面上搜索即可

  navigateToSearchPageIfMobile = () => {
    combineLatest([this.isMobile$, this.searchActive$]).pipe(
      takeUntil(this.unsubscribe$),
      filter(([isMobile, active]) => isMobile && active))
      .subscribe(() => {
        this._router.navigate(["./", this._languageService.lang$.value, paths.MARKETOVERVIEW, paths.SEARCH], {queryParams: {search: this.searchText$.value}})
      })
  }

或者仅仅是数据驱动的设计，*ngif

或者，您可以创建自己的断点服务:

export class BreakpointService {

    constructor() {
        this.onLoad()
        this.onResize()
    }

    private readonly breakpoints = {
        xs: 0,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200
    }

    private currentWidthSub$ = new BehaviorSubject<number>(null)
    public currentWidth$ = this.currentWidthSub$.asObservable()

    isMobile$ = this.currentWidth$.pipe(map(x => x < this.breakpoints.md), distinctUntilChanged())

    currentBreakpoint$ = this.currentWidthSub$.pipe(
        filter(width => width != null),
        map(width => {
            return Object.keys(this.breakpoints).map((key) => {
                return {
                    key: key,
                    value: this.breakpoints[key] - 1
                }
            }).reverse().find(x => x.value < width).key
        }),
        distinctUntilChanged()
    )

    private onResize = () => {
        fromEvent(window, 'resize').subscribe(resize => {
            this.currentWidthSub$.next(resize.currentTarget["innerWidth"])
        })
    }

    private onLoad = () => {
        fromEvent(window, 'load').subscribe(load => {
            this.currentWidthSub$.next(load.currentTarget["innerWidth"])
        })

    }  
}