angular - Angular:在路由之间重用页面骨架
问题描述
考虑一个布局为两个独立组件的网站,可能是一个导航栏和一个主要内容区域。导航栏在页面之间略有不同;它是由一个小字典参数化的单个组件。另一方面,主要内容区域在每个页面上包含完全不同的组件。
我想实现一个“骨架”组件并在路由之间重用它:
<div class='container'>
<div class='navbar'>...</div>
<div class='content'>...</div>
</div>
如何将导航栏和内容插入其中?
我考虑过使用辅助路由或子路由,但考虑到这两个组件不应该单独发展,这两种方法都感觉非常重要。如果 Angular 以某种方式支持它们,它们可能应该作为同一路由的一部分来实现。
解决方案
让我们将其视为一些 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>
推荐阅读
- powerbi-embedded - PowerBI Embedded 不使用 AD 使用来自 AAS 的数据
- php - 使用相同的表别名左连接多个表(根据条件仅加载一个)
- python - 如何优雅地处理 Spyne XSD 异常
- python - 跨多个列使用 isin
- flutter - Flutter / Mac / AndroidStudio / Gradle / appbundle
- php - 如何使另一个计数函数中的计数函数工作
- vaadin - 如何在加载后对 Vaadin 组件进行运行时更改
- .net - 将 log4net 从 2.0.8 降级到 2.0.0 并在代码运行之前获得未处理的异常
- c++ - std::future.wait_for 永远阻塞
- android - 应用程序在启动时崩溃(Lollipop 5.1.1,平板电脑)