回答:
いくつかの解決策がありますが、すべてを確認してください:)
ルーターアウトレットはactivate
、新しいコンポーネントがインスタンス化されるたびにイベントを発行するので、(activate)
、たとえば上にスクロール。
app.component.html
<router-outlet (activate)="onActivate($event)" ></router-outlet>
app.component.ts
onActivate(event) {
window.scroll(0,0);
//or document.body.scrollTop = 0;
//or document.querySelector('body').scrollTo(0,0)
...
}
onActivate(event) {
let scrollToTop = window.setInterval(() => {
let pos = window.pageYOffset;
if (pos > 0) {
window.scrollTo(0, pos - 20); // how far to scroll on each step
} else {
window.clearInterval(scrollToTop);
}
}, 16);
}
選択的にしたい場合は、すべてのコンポーネントがスクロールをトリガーするとは限らないので、チェックすることができます。
onActivate(e) {
if (e.constructor.name)==="login"{ // for example
window.scroll(0,0);
}
}
{ scrollPositionRestoration: 'enabled' }
熱心にロードされたモジュールでも使用でき 、すべてのルートに適用されます:
RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })
スムーズなスクロールも行います。ただし、これはすべてのルーティングで実行するのに不便です。
query(':enter, :leave', style({ position: 'fixed' }), { optional: true }),
window
オブジェクトのスクロールイベントが角度5で機能しません。理由は何でしょうか?
Angular 6でこの問題に直面した場合はscrollPositionRestoration: 'enabled'
、app-routing.module.tsのRouterModuleにパラメーターを追加することで修正できます:
@NgModule({
imports: [RouterModule.forRoot(routes,{
scrollPositionRestoration: 'enabled'
})],
exports: [RouterModule]
})
scrollPositionRestoration
プロパティは動的なページコンテンツ(つまり、ページコンテンツが非同期で読み込まれる場所)では機能しないことに注意してください:このAngularバグレポートを参照してください:github.com/angular/angular / issues / 24547
編集: Angular 6+の場合、Nimesh Nishara Indimagedaraの回答を使用してください:
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled'
});
元の答え:
すべて失敗した場合は、テンプレート(または親テンプレート)にid = "top"を指定して、上部(または目的の場所までスクロール)に空のHTML要素(例:div)を作成します。
<div id="top"></div>
そしてコンポーネントで:
ngAfterViewInit() {
// Hack: Scrolls to top of Page after page view initialized
let top = document.getElementById('top');
if (top !== null) {
top.scrollIntoView();
top = null;
}
}
今Angular 6.1で利用可能な組み込みのソリューションがあります scrollPositionRestoration
オプション付きのました。
Angular 2で私の回答を参照してください。Route Changeの一番上までスクロールしてください。
@Vegaは質問への直接的な回答を提供しますが、問題があります。ブラウザの戻る/進むボタンを壊します。ユーザーがブラウザの[戻る]または[進む]ボタンをクリックすると、場所が失われ、上部にスクロールされます。ユーザーがリンクにたどり着くために下にスクロールする必要があり、スクロールバーが上部にリセットされていることを確認するためだけに戻るをクリックした場合、これはユーザーにとって少し面倒なことです。
これが私の問題の解決策です。
export class AppComponent implements OnInit {
isPopState = false;
constructor(private router: Router, private locStrat: LocationStrategy) { }
ngOnInit(): void {
this.locStrat.onPopState(() => {
this.isPopState = true;
});
this.router.events.subscribe(event => {
// Scroll to top if accessing a page, not via browser history stack
if (event instanceof NavigationEnd && !this.isPopState) {
window.scrollTo(0, 0);
this.isPopState = false;
}
// Ensures that isPopState is reset
if (event instanceof NavigationEnd) {
this.isPopState = false;
}
});
}
}
6+
@からのAngularバージョンの場合
、ルーターを構成するオプションを表します。docs
interface ExtraOptions {
enableTracing?: boolean
useHash?: boolean
initialNavigation?: InitialNavigation
errorHandler?: ErrorHandler
preloadingStrategy?: any
onSameUrlNavigation?: 'reload' | 'ignore'
scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
anchorScrolling?: 'disabled' | 'enabled'
scrollOffset?: [number, number] | (() => [number, number])
paramsInheritanceStrategy?: 'emptyOnly' | 'always'
malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
urlUpdateStrategy?: 'deferred' | 'eager'
relativeLinkResolution?: 'legacy' | 'corrected'
}
一つは使用することができますscrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
で
例:
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled'|'top'
});
また、手動でスクロールを制御する必要がある場合は、window.scroll(0,0)
代わりにAngular V6の共通パッケージを使用する必要はありませんViewPortScoller
。
abstract class ViewportScroller {
static ngInjectableDef: defineInjectable({ providedIn: 'root', factory: () => new BrowserViewportScroller(inject(DOCUMENT), window) })
abstract setOffset(offset: [number, number] | (() => [number, number])): void
abstract getScrollPosition(): [number, number]
abstract scrollToPosition(position: [number, number]): void
abstract scrollToAnchor(anchor: string): void
abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void
}
使い方はかなり簡単な 例です:
import { Router } from '@angular/router';
import { ViewportScroller } from '@angular/common'; //import
export class RouteService {
private applicationInitialRoutes: Routes;
constructor(
private router: Router;
private viewPortScroller: ViewportScroller//inject
)
{
this.router.events.pipe(
filter(event => event instanceof NavigationEnd))
.subscribe(() => this.viewPortScroller.scrollToPosition([0, 0]));
}
mat-sidenavを使用してルーターアウトレットにIDを与え(親と子のルーターアウトレットがある場合)、アクティブ化関数
<router-outlet id="main-content" (activate)="onActivate($event)">
を使用し、この「mat-sidenav-content」クエリセレクターを使用して上にスクロールする場合
onActivate(event) {
document.querySelector("mat-sidenav-content").scrollTo(0, 0);
}
id
(router-outlet
アプリにシングルがあります)。私はまた、より「角度のある方法」でそれを行いました: @ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer; onActivate() { this.sidenavContainer.scrollable.scrollTo({ left: 0, top: 0 }); }
AngularJSにあるようなこの問題の組み込みソリューションを探し続けます。しかし、それまでは、このソリューションはうまくいきました。シンプルで、戻るボタンの機能を維持します。
app.component.html
<router-outlet (deactivate)="onDeactivate()"></router-outlet>
app.component.ts
onDeactivate() {
document.body.scrollTop = 0;
// Alternatively, you can scroll to top by using this other call:
// window.scrollTo(0, 0)
}
以下は、初めてコンポーネントごとにアクセスした場合にのみコンポーネントの一番上までスクロールするソリューションです(コンポーネントごとに何かを行う必要がある場合)。
各コンポーネントで:
export class MyComponent implements OnInit {
firstLoad: boolean = true;
...
ngOnInit() {
if(this.firstLoad) {
window.scroll(0,0);
this.firstLoad = false;
}
...
}
Angular 6.1以降:
あなたは使用することができ、溶液中建てで利用可能な角度6.1以降オプションでscrollPositionRestoration: 'enabled'
同じことを達成します。
@NgModule({
imports: [RouterModule.forRoot(routes,{
scrollPositionRestoration: 'enabled'
})],
exports: [RouterModule]
})
Angular 6.0以前:
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";
@Component({
selector: 'my-app',
template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
private lastPoppedUrl: string;
private yScrollStack: number[] = [];
constructor(private router: Router, private location: Location) { }
ngOnInit() {
this.location.subscribe((ev:PopStateEvent) => {
this.lastPoppedUrl = ev.url;
});
this.router.events.subscribe((ev:any) => {
if (ev instanceof NavigationStart) {
if (ev.url != this.lastPoppedUrl)
this.yScrollStack.push(window.scrollY);
} else if (ev instanceof NavigationEnd) {
if (ev.url == this.lastPoppedUrl) {
this.lastPoppedUrl = undefined;
window.scrollTo(0, this.yScrollStack.pop());
} else
window.scrollTo(0, 0);
}
});
}
}
注意: 予想される動作では、ページに戻ったときに、リンクをクリックしたときと同じ場所まで下にスクロールしたままにする必要がありますが、すべてのページにアクセスすると、一番上までスクロールします。
これを試して:
app.component.ts
import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators';
import {Subscription} from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
subscription: Subscription;
constructor(private router: Router) {
}
ngOnInit() {
this.subscription = this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
コンポーネント:テンプレートでアクションを作成する代わりにすべてのルーティングイベントをサブスクライブし、NavigationEnd b / cでスクロールします。それ以外の場合は、不正なナビゲーションやブロックされたルートなどでこれを発生させます。これは、ルートが正常にナビゲートされてから、スムーズにスクロールします。それ以外の場合は、何もしません。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
router$: Subscription;
constructor(private router: Router) {}
ngOnInit() {
this.router$ = this.router.events.subscribe(next => this.onRouteUpdated(next));
}
ngOnDestroy() {
if (this.router$ != null) {
this.router$.unsubscribe();
}
}
private onRouteUpdated(event: any): void {
if (event instanceof NavigationEnd) {
this.smoothScrollTop();
}
}
private smoothScrollTop(): void {
const scrollToTop = window.setInterval(() => {
const pos: number = window.pageYOffset;
if (pos > 0) {
window.scrollTo(0, pos - 20); // how far to scroll on each step
} else {
window.clearInterval(scrollToTop);
}
}, 16);
}
}
HTML
<router-outlet></router-outlet>