Fatal编程技术网
  • angular/
  • Angular MediaObserver与Observer的区别是什么？

Angular MediaObserver与Observer的区别是什么？

angular responsive-design angular-material

Angular MediaObserver与Observer的区别是什么？,angular,responsive-design,angular-material,media-queries,angular-cdk,Angular,Responsive Design,Angular Material,Media Queries,Angular Cdk,在做了一些搜索之后，我意识到我应该使用这个库来让以材料为主题的UI响应（如回答所示）。根据，该库提供了MediaObserver类，以编程方式检测媒体查询激活 我使用了material schematics命令- ng g @angular/material:navigation shell/layout 要添加Sidenav组件，请注意以下生成的代码- 导出类布局组件{ isHandset$：Observable=this.breakpointObserver.observe（Breakpo

在做了一些搜索之后，我意识到我应该使用这个库来让以材料为主题的UI响应（如回答所示）。根据，该库提供了
MediaObserver
类，以编程方式检测媒体查询激活

我使用了material schematics命令-

ng g @angular/material:navigation shell/layout
要添加
Sidenav
组件，请注意以下生成的代码-

导出类布局组件{
isHandset$：Observable=this.breakpointObserver.observe（Breakpoints.Handset）.pipe(
映射（result=>result.matches），
shareReplay（）
);
构造函数（私有断点观察者：断点观察者）{}
}
它使用
@angular/cdk/layout
包中的
断点观察者
类和预定义的
断点
，来检测视口更改。而这个人说-

layout包提供了构建响应性UI的实用程序 对屏幕大小的变化做出反应

因此，显然，有两种不同的库可用于使以材料为主题的UI响应，它们使用不同的方法。（如果我错了，请纠正我）

我想知道-

  • 从使用角度来看，这两个库/包之间有什么区别，即何时使用哪个库/包
  • MediaObserver
    是否在引擎盖下使用
  • 如果我使用Flex布局，我应该完全避免使用
    @angular/cdk/Layout
    实用程序吗？在这方面是否有一些最佳实践可供遵循
编辑：2020.05.11
根据
MediaObserver
的源代码，它没有在引擎盖下使用
断点观察者。它使用本机
Window.matchMedia（）
API