问MediaObserver对BreakpointObserver -有什么区别？

EN

在进行了一些搜索之后，我意识到我应该使用柔性布局库来使以材料为主题的UI响应(如应答这里)。根据文档，这个库提供了以编程方式检测媒体查询激活的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类和来自@angular/cdk/layout包的预定义Breakpoints来检测视口更改。文档说-

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

因此，显然，有两个不同的库可以使材料主题的UI响应，他们使用不同的方法。(如果我错了，请纠正我)。

我想知道-

• 从使用角度看，这两个库/包之间有什么区别，即什么时候使用哪一个？
• MediaObserver是否在幕后使用BreakpointObserver？
• 如果我使用Flex-布局，我应该完全避免使用@angular/cdk/layout实用程序吗？在这方面是否有一些最佳做法？

编辑: 2020.05.11

根据MediaObserver的源代码，它不使用底层的BreakpointObserver .它使用本机Window.matchMedia() API。