angular - MediaObserver vs BreakpointObserver - 有什么区别？

Question

在做了一些搜索之后，我意识到我应该使用Flex-Layout库来使 Material-themed UI 响应式（如回答here）。并且根据文档，该库提供了MediaObserver以编程方式检测媒体查询激活的类。

我使用了材料示意图命令 -

ng g @angular/material:navigation shell/layout

添加一个Sidenav组件，并注意到以下生成的代码 -

export class LayoutComponent {
    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
        map(result => result.matches),
        shareReplay()
    );

    constructor(private breakpointObserver: BreakpointObserver) { } 
}

它使用包中的类BreakpointObserver和预定义来检测视口变化。文件说-Breakpoints@angular/cdk/layout

布局包提供实用程序来构建响应屏幕大小变化的响应式 UI。

因此，显然，有两个不同的库可用于使 Material-themed UI 响应式，并且它们使用不同的方法。（如果我错了，请纠正我）。

我想知道 -

• 从使用的角度来看，这两个库/包之间有什么区别，即何时使用哪个？
• 在引擎盖下MediaObserver使用吗？BreakpointObserver
• 如果我使用 Flex-Layout，我应该@angular/cdk/layout完全避免使用实用程序吗？在这方面是否有一些最佳实践可以遵循？

编辑：2020.05.11
根据源代码MediaObserver，它不使用BreakpointObserver引擎盖。它Window.matchMedia()改为使用本机 API。

标签： angularresponsive-designangular-materialmedia-queriesangular-cdk