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

【问题标题】：Angular: reuse page skeleton between routesAngular：在路由之间重用页面骨架
【发布时间】：2020-05-21 15:50:14
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angular angular-router

【解决方案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>

【讨论】：

这行得通，谢谢！我还发现我可以定义<ng-template> 对象并将它们作为@Input() ... TemplateRef 传递给容器，然后容器使用*ngTemplateOutlet 内联它们。