Angular 2组件中ngAfterViewInit调用函数提示未定义的解决方法

你遇到的这个“未定义”错误，核心原因是没有通过this关键字调用组件类的成员方法。在Angular组件里，类的方法和属性都需要通过this来访问，直接写函数名的话，JavaScript会在全局作用域里找这个函数，自然找不到就报错了。

修复后的代码示例 #

把你的ngAfterViewInit方法修改成这样：

ngAfterViewInit(){ 
  this.gridW = document.getElementById('grid').offsetWidth; 
  console.log(this.getColWidth(10,8,800)); // 这里加上this.
}

getColWidth(gutW: number, colN: number, gridW: number) { 
  let gutWTotal = gutW*(colN-1); 
  let gridWResult = gridW - gutWTotal; 
  let colW = gridWResult / colN; // 补全你原本的计算逻辑
  return colW;
}

额外注意事项 #

• 确保getColWidth确实是你当前组件类的成员方法，不要把它定义在某个局部作用域里（比如其他函数内部），否则this也无法访问到它。
• 你已经正确利用了ngAfterViewInit的时机（视图初始化完成后执行，能确保DOM元素grid已经存在），这部分是没问题的。

内容的提问来源于stack exchange，提问作者dcp3450