Angular-Material Sidenav cdkScrollable [英] Angular-Material Sidenav cdkScrollable

问题描述

Angular Material CDK 提供了一个Directive CdkScrollable，它允许你监听特定容器的ScrollEvent.
我现在正在尝试访问默认添加的 MatSidenavContent 的 CdkScrollable.
但是我的 @ViewChild(CdkScrollable) 和 @ContentChild(CdkScrollable) 总是未定义的.

我的 Component 看起来像这样:

<mat-sidenav>Sidenav 内容</mat-sidenav><div>主要内容</div></mat-sidenav-container>

生成的 DOM 如下所示:

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

自动生成的 mat-sidenav-content Component 使用我需要访问的 CdkScrollable-Directive.
我现在的问题是:
是否可以访问该 Directive，如果可以，如何访问?

解决方案

我前段时间在 @angular/material 上打开了一个问题，他们现在公开了 CdkScrollable-Instance.
要使用它，您需要使用@ViewChild(MatSidenavContainer) 访问MatSidenavContainer.这个实例有一个公共成员scrollable，它是CdkScrollable 实例.
可以找到一个例子 这里

由于示例不是很完整，有些人在实现它时遇到了困难，我将在这里编写自己的示例:

HTML:

<mat-sidenav #sidenav>Sidenav 内容</mat-sidenav><div>主要内容

</mat-sidenav-container>

打字稿:

import { Component, AfterViewInit, ViewChild } from '@angular/core';从'@angular/material' 导入 { MatSidenavContainer };@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 AfterViewInit {@ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer;构造函数(){}ngAfterViewInit() {console.log(this.sidenavContainer.scrollable);}}

重要:

1. 不要使用.这个标签是自动生成的，并且附加了 cdkScrollable 指令.如果您在自己的模板中使用 ，scrollable 将是未定义的.
2. 使用 AfterViewInit 而不是 OnInit.据我所知，@ViewChild 是在 AfterViewInit 中解决的，OnInit 可能还为时过早.

The Angular Material CDK provides a Directive CdkScrollable, which allows you to listen to ScrollEvents of a specific container.
I am now trying to access the CdkScrollable of the MatSidenavContent, which is added by default.
However my @ViewChild(CdkScrollable) and @ContentChild(CdkScrollable) are always undefined.

My Component looks something like this:

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

The resulting DOM looks something like this:

<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>

The mat-sidenav-content Component, which is generated automatically, uses a CdkScrollable-Directive, which I need to access.
My question is now:
Is it possible to access that Directive and if so, how?

解决方案

I opened an Issue on @angular/material some time ago and they now expose the CdkScrollable-Instance.
To use it, you need to access the MatSidenavContainer using @ViewChild(MatSidenavContainer. This instance has a public member scrollable, which is the CdkScrollable instance.
An example can be found here

Edit: As the example is not very complete and a few people are having difficulties implementing it, I'll write my own example here:

HTML:

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

TypeScript:

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);
    }
}

Important:

1. Don't use <mat-sidenav-content>. This tag is generated automatically and it has the cdkScrollable directive attached to it. If you use <mat-sidenav-content> in your own template, the scrollable will be undefined.
2. Use AfterViewInit instead of OnInit. As much as I know, @ViewChild is resolved in AfterViewInit, OnInit is probably too early.

这篇关于Angular-Material Sidenav cdkScrollable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！