我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。

我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。

那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?


当前回答

简单解决方案:在主路模块中添加scrollPositionRestoration功能。 是这样的:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

其他回答

经过一两个小时的尝试,ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $提供('$uiViewScroll',…),和许多其他的组合,我不能得到滚动到新页面顶部的工作预期。

这最终对我来说是有效的。它捕获pushState和replaceState,只在新页面被导航到时更新滚动位置(后退/前进按钮保留它们的滚动位置):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

这段代码对我来说很有用。我希望它也会为你工作。 你所要做的就是注入$anchorScroll到你的运行块,并将监听器函数应用到rootScope,就像我在下面的例子中所做的那样。

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

下面是Angularjs模块的调用顺序:

app.config () app.run () 指令的编译函数(如果它们在dom中找到) app.controller () 指令的链接函数(如果找到的话)

RUN BLOCK在注入器创建后执行,用于启动应用程序。这意味着当你重定向到新的路由视图时,运行块中的侦听器调用

$ anchorScroll ()

你现在可以看到滚动开始顶部与新的路由视图:)

有点晚了,但我已经尝试了所有可能的方法,没有一个能正常工作。以下是我的优雅解决方案:

我使用一个控制器来管理我所有的页面与ui-router。它允许我将未经过身份验证或验证的用户重定向到适当的位置。大多数人把他们的中间件放在他们的应用程序的配置中,但我需要一些http请求,因此全局控制器更适合我。

我的index.html看起来像这样:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

我的initCtrl.js是这样的:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

所有可能的方法我都试过了,这个方法效果最好。

你可以使用这个javascript

$anchorScroll()

这为我工作,包括自动滚动

<div class=“ngView”autoscroll=“true”>