Angular CDK 布局 - 如何在整个项目中全局包含 BreakPointObserver

Question

我正在使用最新的 Angular 建立一个新项目。我为此使用 Angular Material。我正在使用BreakpointObserver来自@angular/cdk/layout. 我能够将其成功添加到我的一个组件中。但我想将其全局添加到我的项目中，以便所有组件/模块都可以使用 Web/平板电脑/移动设备断点来进行不同的 DOM 操作。

我可以将其添加到 app.component.ts 中，但我希望编写一条指令或其他内容。不是服务，因为BreakpointObserver已经是服务。

在项目中全局添加 BreakPointObserver 可观察量的最佳方法是什么？不想每次在每个组件的 ts 文件中添加 isHandset$ observables

Answer 1

我认为您使用某种自定义指令的想法将是一个很好的解决方案。例如，如果您想要添加/删除 DOM 的组件，则可以仅定义一个结构指令来处理添加/删除其宿主，具体取决于使用的视口尺寸BreakpointObserver服务的视口尺寸。

\n

为了实现这一点，您可以定义如下内容：

\n

@Directive({\n    selector: \'[contentForSmallScreen]\'\n})\nexport class ContentForSmallScreenDirective implements OnDestroy  {\n\n  constructor(\n     private templateReference: TemplateRef<any>,\n     private viewContainerRef: ViewContainerRef,\n     private breakpointObserver: BreakpointObserver\n  ) {\n      this.breakpointObserver\n          .observe([tablet,mobile])\n          .pipe(pluck(\'matches\'), distinctUntilChanged())\n          .subscribe(this.showHideHost);  \n  }\n\n  private showHideHost = (matches: boolean) => {\n      matches \n          ? this.viewContainerRef.createEmbeddedView(this.templateReference)\n          : this.viewContainerRef.clear();\n  }\n\n  ngOnDestroy(): void {\n    this.breakpointObserver.ngOnDestroy();\n  }\n}\n

\n

然后在您的 NgModule 中声明它之后，它可以与您想要从 DOM 添加/删除的任何组件/html 元素一起使用，具体取决于视口的尺寸是否满足平板电脑和移动设备视口规范。

\n

<app-any-component *contentForSmallScreen></app-any-component>\n

\n

\xe2\x80\x8d StackBlitz 示例

\n