Angular升级到9后ngx-contextmenu不显示，Overlay指向不存在的DOM元素

这种Overlay指向无效容器的情况是Angular CDK跨大版本升级时的常见问题，Angular 8升级到Angular 9的阶段，CDK对Overlay容器的挂载、实例管理逻辑做了不兼容调整，很容易和依赖CDK的第三方组件（比如ngx-contextmenu）的旧初始化逻辑冲突，导致Overlay持有的是已经被销毁从DOM移除的旧容器实例。

你可以按以下优先级尝试修复：

• 先确认@angular/cdk包的版本和你当前使用的Angular 9版本完全匹配，跨版本不匹配的CDK包是触发这类问题的最常见原因，多数情况升级/降级CDK到对应Angular版本即可解决问题。
• 手动重置全局Overlay容器，在应用根组件AppComponent的ngOnInit生命周期钩子中注入OverlayContainer，先清理旧的无效容器，再强制生成新的全局容器，参考代码如下：

import { OverlayContainer } from '@angular/cdk/overlay';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private overlayContainer: OverlayContainer) {}

  ngOnInit(): void {
    // 销毁旧的容器实例
    this.overlayContainer.ngOnDestroy();
    // 强制创建新的容器挂载到body下
    (this.overlayContainer as any)._createContainer();
  }
}

• 给ngx-contextmenu主动指定活跃的视图容器，调用上下文菜单打开方法时，主动传入当前组件的ViewContainerRef实例，强制菜单使用当前活跃的视图容器创建Overlay，避免调用全局缓存的旧容器，参考调用格式：this.contextMenuService.open(menuInstance, { viewContainerRef: this.viewContainerRef })
• 如果以上方案都无效，可以降级ngx-contextmenu到5.x版本，ngx-contextmenu 6.0.0本身是适配Angular 10+的版本，对Angular 9的兼容性存在缺陷，降级到5.x版本可以直接匹配Angular 9的CDK逻辑。

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