时间戳

首页 > 解决方案 > Angular：是否可以将开始和结束标签放在单独的组件中？

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

问题描述

使用具有多个视图的应用程序，每个视图都有一个复杂的页眉和页脚（所有视图都相同）。我想将页眉和页脚 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>

有任何想法吗？

标签： angular

解决方案

你可以试试

方法一

为顶线（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">

然后在所有视图中添加

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

希望这可以帮助。

推荐阅读