为什么Angular 12配置路由多布局时出现header/footer重复问题

问题原因 #

出现重复渲染的核心原因是app.component.html作为应用根组件模板，已经全局渲染了头部导航、头部组件、页脚，而StaticPageLayoutComponent作为子路由挂载的布局组件，又重复写了一遍导航和页脚，最终导致页面上出现多套相同组件。

解决方案 #

步骤1：重构根组件模板 #

清空app.component.html里的固定公共组件，只保留路由出口，所有布局逻辑都交给路由配置的布局组件控制，避免全局强制渲染公共区块：

<div>
  <router-outlet></router-outlet>
</div>

步骤2：新增首页专属布局组件 #

新建HomeLayoutComponent作为首页的布局容器，模板内容为首页需要的对应区块：

<div>
  <div>
    <app-header-navigation></app-header-navigation>
    <app-header></app-header>
  </div>
  <div class="content" role="main">
    <router-outlet></router-outlet>
  </div>
  <div>
    <app-footer></app-footer>
  </div>
</div>

步骤3：调整路由配置 #

修改路由规则，让首页路由挂载到HomeLayoutComponent下，静态页路由挂载到StaticPageLayoutComponent下，两套布局完全隔离：

const routes: Routes = [
  {
    path: '', 
    component: HomeLayoutComponent,
    children: [
      {path: '', component: HomepageComponent, pathMatch: 'full'}
    ]
  },
  { // Static Pages (Inside)
    path: '', 
    component: StaticPageLayoutComponent,
    children: [
      {path: 'about-us', component: AboutUsComponent, pathMatch: 'full'},
      {path: 'contact-us', component: ContactUsComponent, pathMatch: 'full'},
      {path: 'faq', component: FaqComponent, pathMatch: 'full'},
      {path: 'guide', component: GuideComponent, pathMatch: 'full'},
      {path: 'help-center', component: HelpCenterComponent, pathMatch: 'full'},
      {path: 'how-it-works', component: HowItWorksComponent, pathMatch: 'full'},
      {path: 'privacy-policy', component: PrivacyPolicyComponent, pathMatch: 'full'},
      {path: 'sales', component: SalesComponent, pathMatch: 'full'},
      {path: 'sitemap', component: SitemapComponent, pathMatch: 'full'},
      {path: 'terms-and-conditions', component: TermsAndConditionsComponent, pathMatch: 'full'}
    ]
  }
];

步骤4：确认静态页布局组件配置 #

保持你现有的static-page-component.html内容不变即可，它已经移除了不需要的app-header组件，和首页布局完全独立。

注意：新增的HomeLayoutComponent需要在你对应的模块（一般是AppRoutingModule所在的模块）的declarations数组中声明，否则会报错。

调整完成后，首页会使用带app-header的布局，所有静态页会使用不带app-header的布局，不会再出现重复渲染的问题，完全匹配你要的展示效果。

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