Angular 5如何实现整页替换？无公共元素页面路由问题咨询

嗨，这个问题其实很好解决——Angular的路由机制完全支持整页替换的场景，只要你调整一下根组件的结构和路由配置就可以了，具体步骤如下：

• 让根组件只保留路由出口
  你的根组件（通常是AppComponent）的模板里不要放任何公共元素（比如导航栏、页脚），只保留<router-outlet></router-outlet>。这样当路由切换时，整个页面的内容就会被当前路由对应的组件完全替换，没有任何残留的公共部分。

  比如app.component.html的内容就这么简单：

  <router-outlet></router-outlet>
  

• 配置路由映射完整页面组件
  在你的路由模块（比如AppRoutingModule）里，为每个完整页面创建对应的路由规则，每个路径直接映射到一个独立的页面组件（这些组件本身就是完整的页面结构，包含自己的头部、内容、尾部等）。

  示例路由配置：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { HomePageComponent } from './pages/home-page/home-page.component';
  import { AboutPageComponent } from './pages/about-page/about-page.component';
  import { ContactPageComponent } from './pages/contact-page/contact-page.component';
  
  const routes: Routes = [
    { path: '', component: HomePageComponent }, // 默认首页
    { path: 'about', component: AboutPageComponent },
    { path: 'contact', component: ContactPageComponent },
    { path: '**', redirectTo: '' } // 404重定向到首页
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 使用路由导航切换页面
  你可以通过routerLink指令在模板里创建导航链接，或者在组件类中使用Router服务来编程式导航，两种方式都会触发整页替换：

  • 模板导航示例：

    <!-- 在HomePageComponent的模板里添加导航 -->
    <button routerLink="/about">前往关于页</button>
    <button routerLink="/contact">前往联系页</button>
    

  • 编程式导航示例：

    import { Router } from '@angular/router';
    
    constructor(private router: Router) {}
    
    goToContactPage() {
      this.router.navigate(['/contact']);
    }
    

这样设置之后，每次路由切换时，<router-outlet>都会渲染对应的完整页面组件，完全替换掉之前的页面内容，正好符合你想要的无公共元素的整页切换需求。

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