Angular：在不同路由之间重用页面骨架。

Question

考虑一个网站布置成两个独立的组件，也许是一个导航条和一个主要内容区。导航条在不同的页面之间变化不大；它是一个由一个小字典参数化的单一组件。另一方面，主内容区在每个页面上包含一个完全不同的组件。

我想实现一个 "骨架 "组件，并在不同路线之间重复使用。

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

我如何将导航条和内容插入其中？

我考虑过使用辅助路由或子路由，但考虑到这两个组件不应该单独发展，这两种方法都感觉非常沉重。它们可能应该作为同一个路由的一部分来实现，如果Angular以某种方式支持的话。

Answer 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>