如何仅在 Angular 中的某些页面上显示 header 组件(现在它仅在重新加载时显示)
How to display header Component only on certain pages in Angular (now it diplays only on reload)
我有一个带有 HomeComponent 的应用程序,但我不想在其中显示 HeaderComponent。
此外,我还有其他 4 条路线,我确实想在其中呈现 Header。
我可以让它工作,但是当我从 HomeComponent 导航到任何其他组件时会出现一个小错误。它不会呈现 Header 组件,但是当我在导航器上重新加载页面时,它会正确显示 header。
我试了很多东西还是不能正常工作...
我想要的
在所有路由上显示 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 {}
app-module.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>
但我得到了相同的结果...
我想那是试图显示 Header 组件,但在我重新加载页面之前它不存在。请你能帮帮我吗....?
您可以创建布局组件并将其他页面加载为布局组件内的子路由,并将页眉放入布局组件内。
const routes: Routes = [
{path:'home':component : homecomponent}
{
path: ' ',
component: HeaderOnlyLayoutComponent,
children: [
{ path: 'youotherpath', component:
childcomponent },
]
}
]
您可以在此处查看完整的描述和示例
Link
我有一个带有 HomeComponent 的应用程序,但我不想在其中显示 HeaderComponent。 此外,我还有其他 4 条路线,我确实想在其中呈现 Header。 我可以让它工作,但是当我从 HomeComponent 导航到任何其他组件时会出现一个小错误。它不会呈现 Header 组件,但是当我在导航器上重新加载页面时,它会正确显示 header。 我试了很多东西还是不能正常工作...
我想要的 在所有路由上显示 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 {}
app-module.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>
但我得到了相同的结果...
我想那是试图显示 Header 组件,但在我重新加载页面之前它不存在。请你能帮帮我吗....?
您可以创建布局组件并将其他页面加载为布局组件内的子路由,并将页眉放入布局组件内。
const routes: Routes = [
{path:'home':component : homecomponent}
{
path: ' ',
component: HeaderOnlyLayoutComponent,
children: [
{ path: 'youotherpath', component:
childcomponent },
]
}
]
您可以在此处查看完整的描述和示例 Link