Angular:是否可以将开始和结束标签放在单独的组件中？

Question

开发具有多个 View 的应用程序，每个 View 都有复杂的页眉和页脚(所有 View 都相同)。我想将页眉和页脚 html 代码放在它们自己的组件中，但编译器提示(“意外的结束标记 div”)。有没有办法让编译器忽略这些错误？

代码如下所示(只是更复杂):

<div class="class1">
<div class="class2">

//main body of the code here

</div>
</div>

所以我想将顶部 2 行代码放在一个组件中，将底部 2 行放在一个单独的组件中，因此代码如下所示:

<app-header>
//main body of the code here
<app-footer>

有什么想法吗？

Answer 1

你可以试试

方法一

为顶行(app-header)创建一个组件，为底行(app-footer)创建一个组件，然后在您的所有观点都添加:

<app-header></app-header>
-- your divs here
<app-footer></app-footer>

方法2

为顶线和底线制作一个组件(例如:app-main-view)，例如:

<div class="header1">
<div class="header2">

<ng-content></ng-content>

<div class="footer 1">
<div class="footer 2">

然后在所有 View 中添加

<app-main-view>
your divs here
</app-main-view>

希望这有帮助。