Angular点击按钮后组件全屏渲染而非与AppComponent共存问题求助

你之前用路由相关方法没生效，核心原因是默认情况下所有子组件都会在AppComponent的<router-outlet>里渲染，而AppComponent自身的布局元素（比如导航栏、页脚）会一直显示，导致看起来是和AppComponent一同渲染。下面给你两个直接可行的方案：

方案一：让AppComponent根据路由动态隐藏布局 #

修改AppComponent的模板，通过判断当前路由，只在非全屏路由时显示自身的布局元素，全屏路由时只保留路由出口：

1. 修改AppComponent的HTML模板：

<!-- 非全屏路由时显示AppComponent的常规布局 -->
<div *ngIf="!isFullscreenRoute">
  <app-header></app-header>
  <div class="main-content">
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
</div>

<!-- 全屏路由时单独渲染组件，占满整个窗口 -->
<router-outlet *ngIf="isFullscreenRoute" class="fullscreen-outlet"></router-outlet>

2. 给全屏路由出口加样式确保占满窗口：

.fullscreen-outlet {
  display: block;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

3. 在AppComponent的TS文件里监听路由变化，判断是否为全屏路由：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isFullscreenRoute = false;
  // 替换成你的全屏组件路由路径
  private fullscreenPath = '/your-fullscreen-component-path';

  constructor(private router: Router) {
    // 监听路由跳转完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.isFullscreenRoute = event.urlAfterRedirects === this.fullscreenPath;
    });
  }
}

方案二：给目标组件添加全屏样式 #

如果不想修改AppComponent的逻辑，也可以直接给需要全屏的组件添加强制占满窗口的样式，同时确保AppComponent的布局元素不会覆盖它：

1. 给目标组件的根元素添加样式：

:host {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* 避免透明显示下层内容 */
  z-index: 9999; /* 确保在最上层 */
}

2. 路由配置保持正常，点击按钮时用router.navigate(['/fullscreen'])跳转即可。这种方式下，AppComponent的布局元素会被全屏组件覆盖，视觉上达到独立渲染的效果。

两种方案里，方案一更彻底，完全隐藏了AppComponent的布局；方案二更快捷，适合快速实现需求。你可以根据自己的项目结构选一个。

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