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

Question

在我的Angular Web项目中，我在Angular 4项目的许多页面中使用了不同的两种或三种类型的标题。有没有办法只编写一次HTML标题代码和页脚代码，并将其包含或注入到您的一个或多个页面中。为了给出一些线索，我需要在每个页面中为@Section in ASP.NET MVC Razor女巫提供替代方法，我们可以为其添加额外的代码（我知道这是服务器方面的事情，但我需要在角度客户端方面）。 是否有官方/推荐的方式来做到这一点？

Answer 1

您应该为此创建组件。类似的东西：

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

然后将其添加到您要使用它的其他页面的模板中（如果您希望它在任何地方，则添加到app.component.html）。类似的东西：

  <myheader></myheader>

如果根据您所在的组件需要不同的标头数据，只需创建一个HeaderService，然后通过它将数据传递给组件的标头。