嘿，我太懂你这个闹心的问题了！之前帮好几个开发者排查过类似的Angular视频全屏故障——你用*ngIf控制视频显示时，它的核心逻辑是直接销毁和重建DOM元素，不是简单的隐藏。这就导致你点视频全屏按钮时，要么因为DOM刚重建还没初始化好进不去，要么刚进去就因为组件被销毁直接退出，确实挺糟心的。

给你几个实用的解决办法，你可以根据自己的场景挑：

• 把*ngIf换成[hidden]指令：*ngIf是真的把组件从DOM里删掉，而[hidden]只是通过CSS的display: none把元素藏起来，DOM元素其实一直留在页面上。你只要把模板里的*ngIf="isTopicExpanded"改成[hidden]="!isTopicExpanded"就行。唯一要注意的是，这种方式不会销毁组件，要是你的视频组件占资源比较大，可能要权衡下性能，但对于解决全屏问题来说，这个交换绝对值得。

• 用自定义CSS类控制显示隐藏：和[hidden]原理差不多，自己写个简单的CSS类：

.video-hidden {
  display: none;
}

然后模板里用[class.video-hidden]="!isTopicExpanded"来控制，同样能保住DOM元素不被销毁，视频的全屏状态也就不会被打断了。

• 进阶方案：手动控制组件生命周期（适合必须动态销毁的场景）：
  如果你确实需要在某些时候销毁组件，那可以监听全屏状态，在视频全屏时阻止组件被销毁。比如监听全局的全屏变化事件，维护一个全屏状态的标志位，然后在*ngIf的判断里加上这个标志位：

首先在组件里添加监听逻辑：

ngOnInit() {
  document.addEventListener('fullscreenchange', this.handleFullscreenToggle.bind(this));
}

private isVideoFullscreen = false;

private handleFullscreenToggle() {
  // 检查当前是否有元素处于全屏状态
  this.isVideoFullscreen = !!document.fullscreenElement;
}

// 控制视频显示的判断逻辑
get shouldKeepVideoAlive() {
  return this.isTopicExpanded || this.isVideoFullscreen;
}

然后模板里把*ngIf="isTopicExpanded"改成*ngIf="shouldKeepVideoAlive"。这样一来，只要视频处于全屏状态，哪怕你收起了话题，组件也不会被销毁，直到用户退出全屏后才会处理。

要是你用的是YouTube这类有官方API的播放器，还可以直接监听播放器自身的全屏事件，比监听document的事件更精准，不过上面的方法是通用的，不管你嵌入的是什么视频播放器都能用。

备注：内容来源于stack exchange，提问作者Yogesh Nawale