使用router-outlet时将组件注入Angular主页

时间:2019-03-07 10:22:37

标签: angular angular-ui-router

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

MasterPageComponent:

<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 },
    ]
  }

ChildComponent:

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

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

也许您有一个建议,如何通过内容注入来实现适当的母版,并保留当前的路由结构。预先感谢。

0 个答案:

没有答案