Angular 2でルート変更時にスクロールトップへ移動する

Angular 2では、ルートが変更された際に自動的にページトップへスクロールする機能を実装することができます。これは、router.eventsを使用してルート変更イベントを監視し、イベントが発生した際にスクロール位置を調整することで実現します。

TypeScriptコード例

import { Component, OnInit, HostListener } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templa   teUrl: './app.component.html',
  styleUrls: ['./app.component.css   ']
})
export class AppComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationE   nd) {
        window.scrollTo(0, 0);
      }
    });
  }
}

コード解説

1. インポート
   RouterとNavigationEndをインポートします。
2. コンストラクタ
   Routerを注入します。
3. ngOnInit
   
   • router.eventsを使用してルート変更イベントを購読します。
   • イベントがNavigationEndインスタンスの場合、window.scrollTo(0, 0)を使用してスクロール位置をトップに設定します。

重要なポイント

• window.scrollTo(0, 0)は、ブラウザのスクロール位置を指定します。最初の引数は水平方向のスクロール位置、2番目の引数は垂直方向のスクロール位置です。
• NavigationEndは、ルートのナビゲーションが完了したときに発生するイベントです。

他のアプローチ

• カスタムディレクティブ
  より複雑なスクロール制御が必要な場合は、カスタムディレクティブを作成することもできます。
• Router.navigate()のオプション
  Router.navigate()メソッドにオプションを渡して、スクロール位置を制御することもできます。

import { Component, OnInit, HostListener } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templa   teUrl: './app.component.html',
  styleUrls: ['./app.component.css   ']
})
export class AppComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationE   nd) {
        window.scrollTo(0, 0);
      }
    });
  }
}

Router.navigate()のオプション

Router.navigate()メソッドにオプションを渡すことで、スクロール位置を制御することができます。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.componen   t.css']
})
export class AppComponent {

     constructor(private router: Router) {}

  navigateTo(path: string) {
    this.router.navigate([path], { queryParams: { scrollPosition: 0 } });
  }
}

この例では、navigateTo()メソッドでルートにナビゲートする際に、queryParamsオプションを使用してscrollPositionを0に設定しています。これにより、ルート変更時にスクロール位置がトップに設定されます。

カスタムディレクティブ

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appScrollToTop]'
})
export class ScrollToTopDirective {

  @Input() appScrollToTop: boolean;

  constructor(private el: ElementRef) {}

  @HostListener('click', ['$event'])
  onClick() {
    if (this.appScrollToTop) {
      window.scrollTo(0, 0);
    }
  }
}

このディレクティブは、クリックされたときにスクロール位置をトップに設定します。appScrollToTopプロパティを設定することで、ディレクティブを有効または無効にすることができます。

ブラウザの履歴API

ブラウザの履歴APIを使用して、特定のURLに移動したときにスクロール位置を復元することができます。

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe((event: any) => {
    if (event instanceof NavigationEnd) {
      const scrollPosition = sessionStorage.getItem('scrollPosition');
      if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
      } else {
        window.scrollTo(0, 0);
      }
    }
  });
}