![onInit]( "onInit")
本文介绍了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);}}
重要:
- 不要使用
cdkScrollable 指令.如果您在自己的模板中使用 scrollable 将是未定义的. - 使用
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:
- 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. - Use
AfterViewInit instead of OnInit. As much as I know, @ViewChild is resolved in AfterViewInit, OnInit is probably too early.
这篇关于Angular-Material Sidenav cdkScrollable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！