时间戳

首页 > 解决方案 > 使用路由器插座时向 Angular 母版页注入组件

angular - 使用路由器插座时向 Angular 母版页注入组件

问题描述

使用角度路由时，如何通过内容注入实现母版页的良好概念？

母版页组件：

<header>
   <ng-container *ngTemplateOutlet="menuContent"></ng-container>
</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer>
INJECT CONTENT HERE
</footer>

路由：

 {
    path: '',
    component:MasterPageComponent,
    children: [
      { path: 'single', component:ChildComponent },
    ]
  }

子组件：

<ng-template #header> INJECT HEADER! </ng-template>

<p>
  Page content
</p>
  1. 所以我尝试了ng-template和ng-container，当模板位于路由器内部并且无法解析时，它们不起作用。
  2. 我不喜欢ng-content的概念，而您必须在整个页面上添加 MasterPageComponent，而不是在路由中添加一个地方！这看起来是一个糟糕的设计。
  3. 如果我将使用另一个路由器插座，如何将页脚数据与主要内容连接起来？

也许您有一个建议，如何通过内容注入实现正确的母版页并保留当前的路由结构。提前致谢。

标签： angularangular-ui-router

解决方案

推荐阅读