Angular:在路由之间重用页面框架

时间:2020-05-21 15:50:14

标签: angular angular-router

将网站设计为两个单独的组件,可能是导航栏和主要内容区域。导航栏在页面之间略有不同。它是由一个小字典参数化的单个组件。另一方面,主要内容区域在每个页面上包含一个完全不同的组件。

我想实现一个“骨架”组件并在路由之间重用:

<div class='container'>
  <div class='navbar'>...</div>
  <div class='content'>...</div>
</div>

如何将导航栏和内容插入其中?

我考虑使用辅助路线或子路线,但是考虑到这两个组成部分不应分别发展,因此这两种方法都显得非常沉重。如果Angular支持,则应该将它们实现为同一路线的一部分。

1 个答案:

答案 0 :(得分:1)

让我们将其视为abc组件 HTML

<div class='container'>
  <ng-content select="[navbar]">...</ng-content>
  <ng-content select="[maincontent]">...</ng-content>
</div>

HTML让我们将其视为将HTML传递给abc组件的其他组件。

<abc>
<ng-container navbar> Content for navbar goes here... <ng-container>
<ng-container mainContent> Content for mainContent goes here... <ng-container>
</abc>