Angular 给我看双人 headers

Question

我有这个 angular 应用程序可以显示两个 headers。

这是我的 app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>

这是我的路线：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { EmployeeComponent } from "./components/employee/employee.component";
import { AppComponent } from "./app.component";

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'employee', component: EmployeeComponent }
];

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

这里我有一些很好的图片，让你很容易理解这个问题。

这里（下方）是首页，我打开我的应用程序时看到的页面：这就是我想要的，只是 header，可能是描述我的应用程序的简单消息和背景图片.

如果我从header点击员工，这里（下面）是我得到的：这里问题解决了：只有一个header和我的html员工代码成分。

我也试过只有 router-outlet 但后来我没有看到显示 header 的方法，因为那个应该是静态的，代码应该改变，而用户会 select 一个不同的组件。

提前感谢您抽出时间！祝大家编程愉快！

Answer 1

这里的问题是您将路径“”设置为使用 AppComponent，它是包含 AppHeader 的组件。所以它将显示 <app-header></app-header> 然后 <router-outlet></router-outlet> 的表示将再次是 AppComponent.html，其中包含 <app-header></app-header>.

要解决这个问题，你应该为''路径使用另一个组件，实际上你不应该将AppComponent用作任何路由的组件，因为这是始终显示的父组件。

我知道这可能有点难以理解，所以请随意要求进一步说明！

Angular 给我看双人 headers

Angular showing me double headers

routes

header

typescript

angular