Angular配置/video路由跳转时如何去除根组件多余内容实现独立页面

你直接写在app.component.html里的所有非路由出口的标签，都是跟随根组件全局渲染的静态内容，不受路由切换控制。只要根组件完成挂载，不管当前匹配到哪个路由路径，这些静态组件都会一直显示，不会因为跳转到/video就自动消失。

方案1：多布局嵌套路由（推荐，长期可维护性强） #

这是Angular官方推荐的多页面架构实现方式，通过嵌套路由为不同页面匹配独立布局，彻底分离不同板块的公共内容：

• 把原来根组件中除了全局<router-outlet>之外的所有静态内容，抽成一个独立的布局组件（比如命名为MainLayoutComponent）。将所有写在原app.component.html里的唱片相关静态标签，全部迁移到这个布局组件的模板中，最后在布局组件的模板末尾加一个嵌套路由出口<router-outlet>，用来承载唱片板块下的子页面内容。
• 调整路由配置结构，把需要显示唱片公共模块的路由全部嵌套在主布局下，video路径作为独立路由不挂载主布局：

const routes: Routes = [
  // 所有需要展示唱片公共模块的页面，都嵌套在主布局路由下
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      { path: '', component: DiscographyContainerComponent },
      // 原有唱片板块的其他路由配置，全部放到这个children数组中
    ]
  },
  // video路径为独立路由，不挂载主布局，不会加载唱片相关公共组件
  { path: 'video', component: VideoComponent }
];

• 精简根组件的模板内容，只保留全局路由出口，移除所有静态组件标签：

<router-outlet></router-outlet>

调整完成后，当路由跳转到/video路径时，匹配到的组件是独立的VideoComponent，全程不会加载主布局组件，自然不会渲染唱片相关的多余内容。你原来带target="_blank"的链接打开新标签页时，也会展示纯净的video独立页面。

方案2：路由状态控制显隐（轻量改法，适合小项目快速调整） #

如果不想抽离布局组件、不想改动原有路由结构，可以通过监听当前路由状态，手动控制静态内容的显示隐藏：

• 在根组件的TS文件中注入Router服务，监听路由导航完成事件，判断当前是否处于/video路径，设置对应的状态标记。
• 给模板中所有需要在video页面隐藏的静态标签，加上*ngIf判断逻辑：

<h1 class="title" *ngIf="currentRoute !== '/video'">{{ title | uppercase }}</h1>
<app-discography-container *ngIf="currentRoute !== '/video'"></app-discography-container>
<app-total-albums *ngIf="currentRoute !== '/video'"></app-total-albums>
<app-single-album *ngIf="currentRoute !== '/video'"></app-single-albums>
<router-outlet></router-outlet>

*注意该方案的局限性：后续每新增一个需要独立布局的页面，都要手动给所有静态标签补充判断条件，维护成本会随独立页面数量增加而上升，扩展性弱于多布局路由方案。

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