Angular 学习笔记 ( CDK - Layout )

简单说就是 js 的 media query. 

1. BreakpointObserver 

const layoutChanges = this.breakpointObserver.observe([
  '(orientation: portrait)',
  '(orientation: landscape)',
]);

layoutChanges.subscribe(result => {
  updateMyLayoutForOrientationChange();
});

ng 还包装了一个 observe 方便我们监听 view port 的变化. 

此外 ng 也依据 material 的标准提供了一个 enum 方便我们写匹配. 

export const Breakpoints = {
  Handset: '(max-width: 599px) and (orientation: portrait), ' +
           '(max-width: 959px) and (orientation: landscape)',
  Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
          '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
  Web: '(min-width: 840px) and (orientation: portrait), ' +
       '(min-width: 1280px) and (orientation: landscape)',

  HandsetPortrait: '(max-width: 599px) and (orientation: portrait)',
  TabletPortrait: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
  WebPortrait: '(min-width: 840px) and (orientation: portrait)',

  HandsetLandscape: '(max-width: 959px) and (orientation: landscape)',
  TabletLandscape: '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};

 

2. MediaMatcher

这个是底层服务，breakpoint 就是建立在这个之上的. 

它没有 observe 只能单纯匹配 media query, 而它的实现原理就是调用了 dom api Window.matchMedia.

 

 

 

所以到这里可以体会到, cdk 帮我们解决了调用 dom api 的烦恼. 写 ui 组件操作 dom 是必然的. 而兼容跨平台问题也是必然的. 

cdk 的目的就是要减轻我们这方面的麻烦.