在angular material2中使用CdkScrollable向上滚动NavigationEnd

在Angular Material2中，可以使用CdkScrollable来实现向上滚动并触发NavigationEnd事件的功能。

首先，Angular Material2是一个用于构建富交互式Web应用程序的UI组件库。它提供了一套现成的UI组件，包括按钮、卡片、对话框等，以及一些实用工具和指令，如CdkScrollable。

CdkScrollable是Angular Material2中的一个指令，用于监听滚动事件。通过将CdkScrollable指令应用到一个元素上，我们可以在该元素滚动时捕获滚动事件。

要在Angular Material2中使用CdkScrollable向上滚动并触发NavigationEnd事件，可以按照以下步骤进行操作：

首先，确保已经安装了Angular Material2和相关依赖。可以通过npm安装这些依赖：

npm install @angular/material @angular/cdk

在需要使用CdkScrollable的组件中，导入CdkScrollable指令：

import { CdkScrollable } from '@angular/cdk/scrolling';

在组件类中声明一个ViewChild，用于获取CdkScrollable指令的实例：

@ViewChild(CdkScrollable) scrollable: CdkScrollable;

在ngAfterViewInit生命周期钩子中，订阅CdkScrollable的scrolled事件，并在事件处理程序中判断滚动方向和滚动位置：

ngAfterViewInit() {
  this.scrollable.elementScrolled().subscribe(() => {
    const scrollTop = this.scrollable.getElementRef().nativeElement.scrollTop;
    const scrollHeight = this.scrollable.getElementRef().nativeElement.scrollHeight;
    const clientHeight = this.scrollable.getElementRef().nativeElement.clientHeight;

    if (scrollTop === 0) {
      // 向上滚动到顶部，触发NavigationEnd事件
      // 触发NavigationEnd事件的代码
    }
  });
}

在上述代码中，我们通过订阅CdkScrollable的elementScrolled事件来监听滚动事件。然后，我们获取滚动元素的scrollTop、scrollHeight和clientHeight属性，用于判断滚动方向和滚动位置。当scrollTop等于0时，表示向上滚动到顶部，我们可以在这里触发NavigationEnd事件。

需要注意的是，触发NavigationEnd事件的具体代码需要根据你的应用程序结构和需求来实现。你可以使用Angular的Router模块来导航到目标页面。

关于Angular Material2的更多信息和使用方法，你可以参考腾讯云的Angular Material2产品介绍页面：Angular Material2产品介绍