Angular 5报错Cannot find name ngAfterViewChecked，页面加载滚动顶部问题

嘿，我瞅了下你的代码，报错的原因很明确，是两个小细节没处理对，咱们来修正它：

问题点分析 #

• 接口名称拼写错误：Angular的生命周期接口是AfterViewChecked，你写成了ngAfterViewChecked——记住，接口名不带ng前缀，带ng的是对应的钩子方法名。
• 钩子方法位置不对：你把ngAfterViewChecked()写在了组件类的外面，这不符合TypeScript的语法规范，方法必须定义在类内部。

修正后的完整代码 #

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { FormGroup } from '@angular/forms'; // 别忘了导入FormGroup

export class UpdateProductComponent implements OnInit, AfterViewChecked { 
  productUpdateForm: FormGroup; 
  dataInvalid = false; 
  formErrors = []; 

  ngOnInit(): void {
    // 这里可以放置你的组件初始化逻辑，比如表单构建等
  }

  ngAfterViewChecked() { 
    window.scrollTo(0, 0); 
  }
}

额外优化建议 #

其实如果只是想在页面加载完成后滚动到顶部，用AfterViewInit钩子会更合适。因为ngAfterViewChecked会在每次视图发生变化时都触发，可能会导致不必要的重复滚动。改成AfterViewInit的代码如下：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

export class UpdateProductComponent implements OnInit, AfterViewInit { 
  productUpdateForm: FormGroup; 
  dataInvalid = false; 
  formErrors = []; 

  ngOnInit(): void {
    // 初始化逻辑
  }

  ngAfterViewInit() { 
    window.scrollTo(0, 0); 
  }
}

这样修改后，执行ng serve就不会报错了，页面加载时也能自动滚动到顶部啦。

内容的提问来源于stack exchange，提问作者Niladri Banerjee - Uttarpara