Angular 6 -> 7 路由和生命周期挂钩问题答案

【问题标题】：Angular 6 -> 7 Routing and Lifecycle Hooks IssueAngular 6 -> 7 路由和生命周期挂钩问题
【发布时间】：2019-11-19 17:35:24
【问题描述】：

由于我们已将 Angular 版本从 6 更新到 7，因此我们遇到了一个小问题。在我们点击一个按钮后，它会将我们导航到另一条路径：

this.router.navigate(['xxx']);

另一方面，我们的 html 有一些初始化逻辑，比如滚动到顶部。这不再适用于较新的版本。我们调试的时候发现问题是这个顺序：

角度 6：

this.router.navigate
将呈现目标 html（您会立即看到下一页）
生命周期挂钩被调用（ngOnInit 滚动）

Angular 7：

this.router.navigate
生命周期挂钩被调用（ngOnInit，甚至 ngAfterViewChecked）
然后将呈现目标html

这是对新版本的应得行为/更改吗？那么我现在应该在哪里使用 Angular 7 运行我们的初始化逻辑呢？

【问题讨论】：

标签： angular

【解决方案1】：

我遇到了同样的问题，无法理解为什么会发生这种情况，但我通过创建一个指令并在 html 中使用该指令解决了它

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

@Directive({
  selector: '[sxScrollTo]'
})
export class ScrollToDirective implements AfterViewInit {

  constructor(private elRef:ElementRef) { }


  ngAfterViewInit() {
    this.elRef.nativeElement.scrollIntoView();
  }

}

<div sxScrollTo>
// html code
</div>

【讨论】：

我试过了。不幸的是，同样的行为。我在调用 ScrollToDirective 后看到我的页面.. 奇怪

【解决方案2】：

当我解决方法时，我发现了这个：

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

来自 Angular 文档：

'enabled'--向后滚动恢复之前的滚动位置导航，否则将位置设置为锚点（如果提供），或将滚动位置设置为 [0, 0]（向前导航）。这选项将是未来的默认选项。

这解决了我们当前的问题。但我仍然不知道为什么 Angular 7 在生命周期钩子方面表现得很奇怪。

【讨论】：