代码之家 › 专栏 › 技术社区 › Robert P

角度材料侧导航cdkScrollable

angular-cdk angular-material2 scroll typescript angular

Robert P · 技术社区 · 7 年前

角材料CDK提供了 Directive CdkScrollable ,它允许您收听 ScrollEvent 特定容器的。
我现在正在尝试访问 CDK滚动 的 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-content 组成部分 ,它是自动生成的,使用 CDK滚动 -指令,我需要访问它。
我现在的问题是:
可以访问吗 指令 如果是这样,怎么做?

2 回复 | 直到 4 年前

BuZZ-dEE Brian Goetz 4 年前

添加到应用程序模块导入: ScrollDispatchModule .
添加 cdkScrollable 给你的 mat-sidenav-content :

<mat-sidenav-content cdkScrollable> </mat-sidenav-content>

在根组件中:

a) 注入 ScrollDispatcher @angular/cdk/overlay 并订阅滚动:

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

更新角度9:

使用 import {ScrollingModule} from '@angular/cdk/scrolling' , 滚动调度模块 已弃用

Robert P 7 年前

不久前,我在@angular/material上发表了一篇文章,现在他们公开了 CdkScrollable -实例。
要使用它,您需要访问 MatSidenavContainer 使用 @ViewChild(MatSidenavContainer . 此实例有一个公共成员 scrollable ,这是 CDK滚动 例子
可以找到一个例子 here

编辑: 由于示例不太完整,并且一些人在实现它时遇到困难,我将在这里编写自己的示例:

HTML :

<mat-sidenav-container>
    <mat-sidenav #sidenav>
        Sidenav Content
    </mat-sidenav>
    <div>
        Main Content
    </div>
</mat-sidenav-container>

类型脚本:

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatSidenavContainer } from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {
  @ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer;

    constructor() {
    }

    ngAfterViewInit() {
      console.log(this.sidenavContainer.scrollable);
    }
}

重要的 :

<mat-sidenav-content> . 该标签是自动生成的,并且具有 cdkScrollable 随附的指令。如果您使用 <mat sidenav内容> 在您自己的模板中 可滚动 将未定义。
使用 AfterViewInit OnInit . 据我所知, @ViewChild 在中解析 AfterViewInit , 奥尼特 可能太早了。