Angular应用mouseenter事件报错：Cannot read property 'style' of null

嘿，这个报错我太熟了！本质就是你代码里的subheading变量是null——也就是说，当你用document.querySelector('#sub-menu')去拿元素的时候，这个元素还没被渲染到DOM里呢，自然没法访问它的style属性。

为啥会出现这个问题？ #

Angular的ngOnInit钩子是在组件初始化完成后触发，但此时组件的模板可能还没完全渲染到页面上。尤其是如果#sub-menu是组件模板里的元素，或者是通过*ngIf这类指令条件渲染的，那在ngOnInit阶段肯定找不到它。

给你几个靠谱的解决方案： #

方案1：用Angular的ViewChild（推荐，符合框架最佳实践）

咱别直接操作DOM了，用Angular提供的ViewChild来获取元素更稳妥：

1. 先在组件模板里给#sub-menu加个模板引用变量：

   <div #subMenu id="sub-menu">你的子菜单内容</div>
   

2. 在component.ts里导入ViewChild和ElementRef，声明变量：

   import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
   
   // ...其他代码
   @ViewChild('subMenu', { static: false }) subheading: ElementRef<HTMLElement>;
   

3. 把事件监听的代码移到ngAfterViewInit钩子（这个钩子是在视图完全渲染后触发的，保证能拿到元素）：

   ngAfterViewInit() {
     const menu = document.querySelector('#m_ver_menu') as HTMLElement;
     // 先做非空判断，避免意外报错
     if (menu && this.subheading.nativeElement) {
       menu.addEventListener('mouseenter', () => {
         this.subheading.nativeElement.style.height = 'auto'; // 这里写你要设置的样式
       });
       // 别忘了加mouseleave事件把样式改回来哦
       menu.addEventListener('mouseleave', () => {
         this.subheading.nativeElement.style.height = '0px';
       });
     }
   }
   

方案2：如果非要用document.querySelector，那就等DOM渲染完再执行

可以用setTimeout把代码推迟到下一个事件循环执行（虽然不是最优解，但临时能用）：

ngOnInit() {
  this.menu = this._appNavigationService.getMenu();
  setTimeout(() => {
    const menu = document.querySelector('#m_ver_menu') as HTMLElement;
    const subheading = document.querySelector('#sub-menu') as HTMLElement;
    if (menu && subheading) {
      menu.addEventListener('mouseenter', () => {
        subheading.style.height = 'auto';
      });
    }
  }, 0);
}

⚠️ 注意：这个方法不太可靠，如果元素渲染时间较长，还是可能拿不到，所以优先用方案1。

方案3：用Angular的响应式样式绑定（更优雅）

其实Angular推荐用数据绑定来控制样式，完全不用直接操作DOM：

1. 在component.ts里定义一个控制高度的变量：

   subMenuHeight = '0px';
   

2. 在模板里用[style.height]绑定这个变量：

   <div id="sub-menu" [style.height]="subMenuHeight">你的子菜单内容</div>
   

3. 然后在ngAfterViewInit里监听事件，直接修改变量就行：

   ngAfterViewInit() {
     const menu = document.querySelector('#m_ver_menu') as HTMLElement;
     if (menu) {
       menu.addEventListener('mouseenter', () => {
         this.subMenuHeight = 'auto';
       });
       menu.addEventListener('mouseleave', () => {
         this.subMenuHeight = '0px';
       });
     }
   }
   

这种方式更符合Angular的响应式理念，代码也更易维护~

最后再提醒一句 #

如果#sub-menu是通过*ngIf条件渲染的，那还要确保只有当条件为真时才执行监听代码，不然还是会拿到null哦！

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