Angular 4.0页面重载时滚动至顶部实现方案咨询

Absolutely you can pull this off in Angular, and working with the beforeunload event is fully supported—here's how to do it the Angular way:

Option 1: Component-Level Implementation (Single Component) #

Use Angular's HostListener decorator to listen for the window:beforeunload event directly in your component. This approach is clean and aligns with Angular's component-based architecture:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {

  // Listen for the beforeunload event on the window
  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: Event): void {
    // Scroll to the top of the viewport
    window.scrollTo(0, 0);
  }
}

This does exactly the same thing as your jQuery code, but integrates seamlessly with Angular's lifecycle instead of manipulating the DOM outside the framework.

Option 2: Global Application-Wide Implementation #

If you want this behavior to apply across your entire app (not just one component), create a service that listens for the event globally. Don't forget to clean up the event listener to avoid memory leaks:

import { Injectable, OnDestroy, OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ScrollOnUnloadService implements OnInit, OnDestroy {

  ngOnInit(): void {
    // Attach the event listener when the service initializes
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  private handleBeforeUnload(): void {
    window.scrollTo(0, 0);
  }

  ngOnDestroy(): void {
    // Remove the listener when the service is destroyed
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }
}

To activate this global behavior, inject the service into your root component (like AppComponent)—it will initialize when your app starts and work across all pages.

Key Notes #

• Angular fully supports the beforeunload event; no special libraries are needed.
• Using HostListener or service-based event listeners is preferred over direct DOM manipulation (like your jQuery code) because it fits better with Angular's lifecycle management and change detection.
• The window.scrollTo(0, 0) call is functionally identical to your jQuery $(window).scrollTop(0)—both scroll the viewport to the top.

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