Angular滚动触发工具栏收缩问题求助：scrollDispatcher报错与无响应

Hey there! I know spending 9 hours troubleshooting this must be super frustrating, so let’s break down your problems and fix them one by one.

1. Resolving the "Cannot find name 'map'" Error #

This is a classic RxJS change in Angular 6+. Back in the day, you could chain operators like .map() directly on observables, but now all pipeable operators (like map, filter, etc.) need to be:

• Imported separately from rxjs/operators
• Used inside the .pipe() method of the observable

Here’s how to fix it:

• Add this import to your component’s TypeScript file:

  import { map } from 'rxjs/operators';
  

• Make sure your pipe usage follows the modern syntax (which you were already trying to do—great start!).

2. Fixing the "No Scroll Response" Issue #

The fact that your scrollDispatcher.scrolled() subscription isn’t firing usually boils down to one of three things: missing module imports, incorrect scroll container setup, or outdated CDK logic. Let’s cover each:

First: Verify Required Modules Are Imported #

You need to add these modules to your Angular module (e.g., app.module.ts):

import { ScrollingModule } from '@angular/cdk/scrolling';
import { MatSidenavModule } from '@angular/material/sidenav';

@NgModule({
  imports: [
    // ... other imports
    ScrollingModule, // Required for cdkScrollable and ScrollDispatcher
    MatSidenavModule // Required for mat-sidenav-content
  ]
})
export class AppModule {}

Second: Ensure the Scroll Container is Properly Configured #

Your mat-sidenav-content has cdkScrollable, but you need to make sure it’s the actual scrollable element. Double-check:

• The mat-sidenav-container wraps your content correctly (it should be the parent of mat-sidenav and mat-sidenav-content).
• No parent elements have overflow: hidden or height: 100% styles that might block scrolling on the mat-sidenav-content.

Third: Update Your Scroll Subscription Logic #

Angular CDK’s ScrollDispatcher has evolved a bit—listening to all scrollable elements might not be as reliable as targeting your specific mat-sidenav-content. Here’s a refined approach:

Updated Component Code

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
import { map, Subscription } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  private scrollSub: Subscription | undefined;

  constructor(private scrollDispatcher: ScrollDispatcher) {}

  ngOnInit() {
    // Wait for the view to initialize, then target the specific scrollable container
    setTimeout(() => {
      const sidenavScrollable = this.scrollDispatcher.getScrollableContainers()
        .find(container => container.getElementRef().nativeElement.tagName === 'MAT-SIDENAV-CONTENT');

      if (sidenavScrollable) {
        this.scrollSub = sidenavScrollable.elementScrolled()
          .pipe(
            map(() => sidenavScrollable.getElementRef().nativeElement.scrollTop)
          )
          .subscribe(scrollTop => {
            console.log('Current scroll position:', scrollTop);
            // Add your toolbar shrink logic here!
            // Example: If scrollTop > 50, apply a "shrunk" class to your toolbar
            const toolbar = document.querySelector('mat-toolbar');
            if (scrollTop > 50) {
              toolbar?.classList.add('shrunk');
            } else {
              toolbar?.classList.remove('shrunk');
            }
          });
      }
    }, 0);
  }

  ngOnDestroy() {
    // Always unsubscribe to prevent memory leaks!
    this.scrollSub?.unsubscribe();
  }
}

Updated HTML

<mat-sidenav-container style="height: 100vh;">
  <mat-sidenav mode="side" opened>Your Sidebar</mat-sidenav>
  <mat-sidenav-content cdkScrollable>
    <!-- Add tall content to test scrolling -->
    <div style="height: 2000px; padding: 2rem;">
      Scroll down to see the toolbar shrink!
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

<mat-toolbar class="toolbar">My Toolbar</mat-toolbar>

Add CSS for Shrink Animation

.toolbar {
  transition: height 0.3s ease;
  height: 64px;
}

.toolbar.shrunk {
  height: 40px;
}

Did Angular Change the Mechanism? #

Yes, a couple of key changes:

1. RxJS Pipeable Operators: As mentioned, chained operators are no longer supported—everything goes through .pipe().
2. Scroll Targeting: ScrollDispatcher now requires explicit targeting of scrollable containers in some cases, especially if you have multiple scrollable elements on the page.
3. Module Separation: The scrolling functionality was moved to ScrollingModule from older CDK modules, so you need to import that explicitly now.

Double-check that your @angular/cdk and @angular/material versions are compatible—mismatched versions can cause unexpected behavior too!

内容的提问来源于stack exchange，提问作者rami bin tahin