如何仅在 Angular 的某些页面上显示标题组件（现在它仅在重新加载时显示）

Posted 2023-03-13

【中文标题】如何仅在 Angular 的某些页面上显示标题组件（现在它仅在重新加载时显示）

【英文标题】：How to display header Component only on certain pages in Angular (now it diplays only on reload)

【发布时间】：2022-01-21 04:34:29

【问题描述】：

我有一个包含 HomeComponent 的应用，但我不想在其中显示 HeaderComponent。 此外，我还有其他 4 条路线，我确实想要渲染标题。 我可以让它工作，但是当我从 HomeComponent 导航到任何其他组件时有一个小错误。它不会呈现 HeaderComponent，但是当我在导航器上重新加载页面时，它会正确显示标题。 我尝试了很多东西，但仍然无法正常工作......

我想要什么 在所有路由上显示 HeaderComponent，除了 /home (HomeComponent)。

这是我的代码 app-routing.module.ts

import  NgModule  from '@angular/core';
import  RouterModule, Routes  from '@angular/router';
import  AboutComponent  from './about/about.component';
import  ContactoComponent  from './contacto/contacto.component';
import  HomeComponent  from './home/home.component';
import  PortfolioComponent  from './portfolio/portfolio.component';
import  SkillsComponent  from './skills/skills.component';

const routes: Routes = [
  
    path: 'home',
    component: HomeComponent,
  ,
   path: 'about', component: AboutComponent, data:  animation: 'fader'  ,
  
    path: 'contacto',
    component: ContactoComponent,
    data:  animation: 'fader' ,
  ,
   path: '**', redirectTo: '' ,
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
)
export class AppRoutingModule 

应用模块.ts

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  NgbModule  from '@ng-bootstrap/ng-bootstrap';
import  HeaderComponent  from './header/header.component';
import  HomeComponent  from './home/home.component';
import  AboutComponent  from './about/about.component';
import  CvComponent  from './cv/cv.component';
import  ContactoComponent  from './contacto/contacto.component';


@NgModule(
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    AboutComponent,
    ContactoComponent,
    CvComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgbModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
)
export class AppModule 

app.component.html

<app-header *ngIf="router.url !== '/home'"></app-header>
<router-outlet> </router-outlet>

我还尝试在每个模板“about.component.html”和“contacto.component.html”上调用<app-header></app-header>，但结果相同...

我猜这是试图显示 HeaderComponent，但在我重新加载页面之前它不存在。请你帮帮我....？

【参考方案1】：

您可以创建一个布局组件并将您的其他页面加载为布局组件内的子路由，并将标题放在布局组件内。

const routes: Routes = [
path:'home':component : homecomponent

 path: ' ',
 component: HeaderOnlyLayoutComponent,
 children: [
   path: 'youotherpath', component: 
   childcomponent ,
  ]
  
]

您可以在此处查看完整说明和示例 Link

【讨论】：

工作就像一个魅力。现在我可以显示没有标题的主页。该链接有非常有用的示例。非常感谢！ (: