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

Question

在我的 Angular Web 项目中，我在 Angular 4 项目的许多页面中使用了两种或三种不同类型的 header 。有没有一种方法可以只对 HTML 页眉代码和页脚代码进行一次编码，然后将其包含或注入(inject)到一个或多个页面中。为了提供一些线索，我需要 @Section in ASP.NET MVC Razor 的替代方案在每个页面中，我们可以向其添加额外的代码(我知道这是服务器端的事情，但我需要在 Angular 客户端中使用它)。 有官方/推荐的方法吗？

Answer 1

您应该为此创建组件。像这样的东西:

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

然后将其添加到您想要使用它的其他页面的模板中(如果您想在任何地方使用它，则将其添加到 app.component.html 中)。像这样的东西:

  <myheader></myheader>

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