如何处理重复的HTML代码，例如Angular 4中的页眉和页脚？

在我的Angular web项目中，我在Angular 4项目的许多页面中使用了两种或三种不同类型的标题。有没有办法只编写一次HTML页眉代码和页脚代码，并将其包含或注入一个或多个页面中。为了提供一些线索，我需要在每个页面中为witch添加一个备选代码（我知道这是服务器端的事情，但我需要在客户端）。

---

有官方/推荐的方法吗？

您应该为此创建组件。比如：

@Component({
    selector: 'myheader',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...

  <myheader></myheader>

然后将它添加到您想要使用它的其他页面的模板中（或者如果您想在任何地方都使用它，则添加到app.component.html）。比如：

@Component({
    selector: 'myheader',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...

  <myheader></myheader>

---

如果您需要根据所处的组件在标题上显示不同的数据，只需创建一个HeaderService，并通过它将数据从组件传递到标题。

我认为问题是关于angularjs，而不是Angular2+问题表示angular 4。它是angular 4，我固定了标记以明确问题：我需要根据页面内的路由URL在同一组件中注入数据。类似于asp.net MVCYes中的部分，但我想说的是，您可以创建一个名为HeaderService的服务，并将其注入到该路由中加载的组件中。然后，您可以在该组件上调用该服务并向其传递数据。这将在HeaderComponent（也有HeaderService）上提供。在app.module.ts处声明提供程序，使其在所有组件中都相同。