MediaObserver 与 BreakpointObserver - 有什么区别？

Question

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

我使用了材料原理图命令 -

ng g @angular/material:navigation shell/layout

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

ng g @angular/material:navigation shell/layout

它使用BreakpointObserver类并Breakpoints从@angular/cdk/layout包中预定义来检测视口更改。和文档说-

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

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

我想知道 -

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

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

Answer 1

来自： https: //github.com/angular/flex-layout/issues/685

@Angular/cdk BreakpointObserver 不会取代 @Angular/flex-layout MediaObserver。MediaObserver 是一个增强版本，可通知订阅者标准 AND 重叠（lt-xxx、gt-xxx）断点的激活。