为什么 Angular 布局不能正常工作？答案

【问题标题】：Why Angular layouts are not working correctly?为什么 Angular 布局不能正常工作？
【发布时间】：2021-08-16 05:35:07
【问题描述】：

我想要的是在我的 Angular 应用程序中为不同的页面设置不同的布局。我正在使用 Angular 12.x。

我正在尝试按照我使用路由通过 Internet 获得的建议来实现相同的功能。但是页眉/页脚被重复了。

const routes: Routes = [
  {
    path: '', 
    component: HomepageComponent
  },
  { // 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'}
    ]
  }
];

app.component.html 看起来像：

<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>

static-page-component.html 看起来像：

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

上面2的区别在于后面的不包含<app-header></app-header>

这就是/contact-us 的样子：

对于我来说，#1、#2 和 #6 部分对于使用 StaticPageLayoutComponent 的路线不应该是可见的

对我来说，#3 和 #5 部分对于 homepage 路由不可见。请提出建议。

【问题讨论】：

标签： angular layout

【解决方案1】：

每当您的应用程序运行时app.component.html 就会执行。因此app.component.html 文件中的以下两行分别显示 Header Navigation 和 Header

<app-header-navigation></app-header-navigation>
<app-header></app-header>

在router outlet 出现并执行static.component.html 之后，在static.component.html 文件中您再次显示标题导航，因此第3 行标题导航是由于这个原因。

页脚也是如此。第 5 行页脚归因于 static.component.html 文件，第 6 行页脚归因于 app.component.html 文件。

从app.component.html 文件中删除app-header-navigation、app-header 和app-footer 并将它们放在其他文件中将为您解决问题。

【讨论】：

感谢 Faiz Shahid，它运行良好 :)