角材料Sidenav cdkScrollable

问题描述

Angular Material CDK提供了Directive CdkScrollable，使您可以收听特定容器的ScrollEvent.
我现在正在尝试访问默认添加的MatSidenavContent的CdkScrollable.
但是我的@ViewChild(CdkScrollable)和@ContentChild(CdkScrollable)始终未定义.

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.

我的Component看起来像这样:

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

生成的DOM看起来像这样:

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>

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

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?

推荐答案

前一段时间，我在@ angular/material上打开了一个Issue，现在他们公开了CdkScrollable -Instance.
要使用它，您需要使用@ViewChild(MatSidenavContainer访问MatSidenavContainer.此实例有一个公共成员scrollable，它是CdkScrollable实例.
可以找到一个例子容器" rel ="noreferrer">此处

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

由于该示例还不是很完整，并且有几个人在实现它时遇到了困难，因此我将在此处编写我自己的示例:

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

重要:

1. 请勿使用<mat-sidenav-content>.该标签是自动生成的，并且附加了cdkScrollable指令.如果您在自己的模板中使用<mat-sidenav-content>，则scrollable将是未定义的.
2. 使用AfterViewInit代替OnInit.据我所知，@ViewChild在AfterViewInit中已解决，OnInit可能为时过早.

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.

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