角度 RouteReuseStrategy 滚动位置保持

Hel*_*rld 5 angular angular-router

角度 RouteReuseStrategy 滚动位置错误。

当我从另一个页面返回列表页面时,滚动条回到顶部

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';

export class SystemRouteReuseStrategy implements RouteReuseStrategy {

  handlers: {[key: string]: DetachedRouteHandle} = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.data.reuse) {
      return true;
    }
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[route.routeConfig.path] = handle;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.handlers[route.routeConfig.path]; 
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

}

Run Code Online (Sandbox Code Playgroud)

Hel*_*rld 0

我指的是离子,

添加了一个新<router-outlet>名称。<active-outlet>

它不会破坏组件,组件将被设置为隐藏。

并添加新的生命周期函数

ngOnChanges

ngOnInit <- first entry create component 

onReuse  <- second entry or router back reuse component 

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

onLeave   <- router level

ngOnDestroy  <-  Manual destroy trigger
Run Code Online (Sandbox Code Playgroud)