Angular 6监听服务属性变更，调整滚动区域高度

Scenario Overview #

We need to adjust the scroll area height when two key events occur:

• Fullscreen mode is toggled
• The menu layout (vertical/horizontal) from the pageService settings changes

Additionally, we'll implement scroll-to-top functionality and toggle the visibility of a back-to-top button based on the user's scroll position.

Full Implementation Code #

Component Properties #

First, define the state variables and view references we'll need to track changes and interact with the template:

// Track fullscreen state and handle first-time fullscreen toggle logic
isfirstChangeFullScreen: boolean = true;
isFullScreen: boolean = false;
// Initial scroll area height value
height: number = 465;

// Reference all PerfectScrollbar directives in the component template
@ViewChildren(PerfectScrollbarDirective) pss: QueryList<PerfectScrollbarDirective>;
// Reference the back-to-top button element
@ViewChild('backToTop1') backToTop: any;

Service Subscription Logic #

Subscribe to the service's subjects to react to layout and fullscreen changes, adjusting the scroll height dynamically:

// Listen for menu layout changes in the service settings
pageService.settingesSubject$.subscribe(data => {
  if (data != undefined) {
    // Compare with existing settings to detect layout changes
    if (this.settings != undefined) {
      if (this.settings.menu != data.menu) {
        // Adjust height: subtract 56px for horizontal menu, add back for vertical
        data.menu === "horizontal" ? this.height -= 56 : this.height += 56;
      }
    } else {
      // Initial setup: adjust height if the default menu is horizontal
      data.menu === "horizontal" ? this.height -= 56 : null;
    }
    // Update local settings state to match the service's latest value
    this.settings = data;
  }
});

// Listen for fullscreen toggle events from the service
pageService.isFullScreenSubject$.subscribe(data => {
  if (data != undefined) {
    // Handle first-time fullscreen activation (only add height once)
    if (this.isfirstChangeFullScreen) {
      data ? this.height += 85 : null;
    } else {
      // Adjust height based on whether we're entering or exiting fullscreen
      if (this.isFullScreen != data) {
        data ? this.height += 85 : this.height -= 85;
      }
    }
    // Update state flags to track fullscreen status
    this.isfirstChangeFullScreen = false;
    this.isFullScreen = data;
  }
});

Scroll & UI Helper Methods #

Implement helper functions for scroll navigation and button visibility control:

// Scroll all PerfectScrollbar instances to the top with smooth animation
public scrollToTop() {
  this.pss.forEach(ps => {
    ps.scrollToTop(0, 250);
  });
}

// Show/hide back-to-top button based on how far the user has scrolled
public onPsScrollY(event) {
  event.target.scrollTop > 300 
    ? this.backToTop.nativeElement.style.display = 'flex' 
    : this.backToTop.nativeElement.style.display = 'none';
}

// Hide the back-to-top button when the component view finishes initializing
ngAfterViewInit() {
  this.backToTop.nativeElement.style.display = 'none';
}

内容的提问来源于stack exchange，提问作者ahmad srhan