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

Question

我正在使用最新的 Angular 设置一个新项目。我正在为此使用 Angular Material。我正在使用来自 @angular/cdk/layout 的 BreakpointObserver。
我能够成功地将它添加到我的一个组件中。但是我想将它全局添加到我的项目中，以便所有组件/模块都可以使用 web/tablet/mobile 断点进行不同的 DOM 操作。

我可以将它添加到 app.component.ts ，但我期待写一个指令或其他东西。不是服务，因为 BreakpointObserver 已经是一项服务。

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

Answer 1

我认为您使用某种自定义指令的想法将是一个很好的解决方案。例如，如果您想添加/删除 DOM 的组件，您可以只定义一个结构指令来处理添加/删除其主机，这取决于使用 BreakpointObserver 的视口(viewport)尺寸。服务。
为此，您可以定义如下内容:

@Directive({
    selector: '[contentForSmallScreen]'
})
export class ContentForSmallScreenDirective implements OnDestroy  {

  constructor(
     private templateReference: TemplateRef<any>,
     private viewContainerRef: ViewContainerRef,
     private breakpointObserver: BreakpointObserver
  ) {
      this.breakpointObserver
          .observe([tablet,mobile])
          .pipe(pluck('matches'), distinctUntilChanged())
          .subscribe(this.showHideHost);  
  }

  private showHideHost = (matches: boolean) => {
      matches 
          ? this.viewContainerRef.createEmbeddedView(this.templateReference)
          : this.viewContainerRef.clear();
  }

  ngOnDestroy(): void {
    this.breakpointObserver.ngOnDestroy();
  }
}

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

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

👨‍💻 StackBlitz example