angular - Angular Material Sidenav cdkScrollable

角材料cdk提供了一个DirectiveCdkScrollable，允许您监听特定容器的ScrollEvents。
我现在试图访问默认添加的CdkScrollable的MatSidenavContent。
但是，我的@viewchild（cdkscrollable）和@contentchild（cdkscrollable）始终未定义。
我的Component看起来像这样：

<mat-sidenav-container>
    <mat-sidenav>Sidenav content</mat-sidenav>
    <div>Main content</div>
</mat-sidenav-container>

生成的dom如下所示：

<mat-sidenav-container>
    <div class="mat-drawer-backdrop"></div>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-sidenav>Sidenav content</mat-sidenav>
    <mat-sidenav-content cdkScrollable>
          <div>Main content</div>
    </mat-sidenav-content>
</mat-sidenav-container>

自动生成的mat-sidenav-contentComponent使用CdkScrollable-指令，我需要访问该指令。
我现在的问题是：
有可能访问Directive吗？如果有，如何访问？

最佳答案

添加到应用程序模块导入：ScrollDispatchModule。
将cdkscrollable添加到Mat SideNav内容：

在根组件中：
a）从@angular/cdk/overlay注入scrolldispatcher并订阅滚动：

constructor(public scroll: ScrollDispatcher) {

    this.scrollingSubscription = this.scroll
          .scrolled()
          .subscribe((data: CdkScrollable) => {
            this.onWindowScroll(data);
          });
}

c）滚动时执行一些操作，例如检查偏移量

private onWindowScroll(data: CdkScrollable) {
    const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
    if (this.lastOffset > scrollTop) {
      // console.log('Show toolbar');
    } else if (scrollTop < 10) {
      // console.log('Show toolbar');
    } else if (scrollTop > 100) {
      // console.log('Hide toolbar');
    }

    this.lastOffset = scrollTop;
  }

文档：https://material.angular.io/cdk/scrolling/api