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 的目的就是要減輕我們這方面的麻煩.