Angular Videogular：监听vgControls自动隐藏以隐藏导航栏

你要同步自定义导航栏和vgControls的自动隐藏状态，这里给你两个靠谱的解决思路：

方案1：正确使用VgControlsHiddenService #

你之前的代码大概率是订阅环节或者注入方式有问题，按下面的步骤来：

1. 先在组件里正确注入服务：

import { VgControlsHiddenService } from '@videogular/ngx-videogular/controls';
import { Subscription } from 'rxjs';

constructor(private controlsHiddenService: VgControlsHiddenService) {}

2. 在组件初始化时订阅状态，别忘了销毁时取消订阅防止内存泄漏：

private hideSub: Subscription;

ngOnInit() {
  this.hideSub = this.controlsHiddenService.isHidden.subscribe(isHidden => {
    // 这里直接写自定义导航栏的显隐逻辑
    if (isHidden) {
      // 隐藏你的自定义导航栏
    } else {
      // 显示你的自定义导航栏
    }
  });
}

ngOnDestroy() {
  this.hideSub?.unsubscribe();
}

注意：你的组件必须在vg-player的组件树范围内，这个服务才能正常获取到控制栏的状态。

方案2：监听DOM类变化（兜底方案） #

如果服务方式还是不生效，可以直接盯vg-controls的DOM类——自动隐藏时它会被加上vg-hidden类。用MutationObserver就能监听这个变化：

private observer: MutationObserver;

ngAfterViewInit() {
  const controlsEl = document.querySelector('vg-controls');
  if (controlsEl) {
    this.observer = new MutationObserver(mutations => {
      mutations.forEach(mut => {
        if (mut.type === 'attributes' && mut.attributeName === 'class') {
          const isHidden = controlsEl.classList.contains('vg-hidden');
          this.handleCustomNavbar(isHidden);
        }
      });
    });
    this.observer.observe(controlsEl, { attributes: true });
  }
}

ngOnDestroy() {
  this.observer?.disconnect();
}

private handleCustomNavbar(isHidden: boolean) {
  // 这里写自定义导航栏的显隐逻辑
}

内容的提问来源于stack exchange，提问作者Lubomír Rýgl