Angular中@ViewChild获取ng-scrollbar实例返回undefined问题求助

核心原因 #

你没有在组件类中通过@ViewChild装饰器声明模板引用变量#dayavailablescroll，Angular无法自动将模板中的引用关联到组件类的属性上，所以this.dayavailablescroll会返回undefined。

解决方案 #

步骤1：导入必要依赖 #

在组件的TypeScript文件中，导入ViewChild、AfterViewInit以及ng-scrollbar对应的组件类（以常用的ngx-scrollbar库为例）：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgScrollbar } from 'ngx-scrollbar'; // 根据你实际使用的滚动条库调整导入路径

步骤2：关联模板引用变量 #

在组件类中，使用@ViewChild关联模板中的#dayavailablescroll引用：

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  // 关联模板引用，!为非空断言（确保组件会被渲染）
  @ViewChild('dayavailablescroll') dayavailablescroll!: NgScrollbar;

  ngAfterViewInit() {
    console.log(this.dayavailablescroll); // 现在可正常获取组件实例
  }
}

额外排查点 #

如果操作后仍为undefined，检查以下情况：

• 父容器是否存在*ngIf等结构型指令：若父容器的*ngIf条件不满足，ng-scrollbar不会被渲染，引用自然无法获取。你的代码中父容器仅使用[ngClass]，不会影响渲染，但后续若添加*ngIf需确保条件为true时再访问引用。
• 滚动条库是否正确安装导入：若使用第三方组件库，需确保已在模块中导入对应的模块（如NgScrollbarModule），否则组件无法正常初始化。

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