在Angular中使用HTML Urls加载页眉和页脚

Question

我在

之类的Jquery的帮助下使用 External HTML Urls加载Header和Footer

$("#dv_header").load(headerUrl);

现在如何在Angular中实现相同目标？

Answer 1

对于Angular 2及更高版本。 使用角度CLI创建两个组件：

this.props.history.push('/some/path')

然后，在您的app.component.ts中：

ng g c header
ng g c footer

在页眉和页脚HTML文件中，您可以使用iFrame呈现外部HTML，也可以在<app-header> <router-outlet> <app-footer> 替换中使用

header/footer.component.ts

具有：

templateUrl: './footer.component.html' (or './header.component.html')

在templateUrl: (YOUR URL HERE) 装饰器中