从Angular4中的子组件填充父组件中的多个占位符

在我的父组件中，我使用了一个

，它可以很好地显示子html

如何允许子组件也指定父组件的其他部分？

这是我尝试过的，但所有内容都在

路由器出口

占位符中呈现

父组件：

<header>
    ...
    <div #myheader></div>
</header>
<router-outlet></router-outlet>

<div #myheader> [Some HTML to be shown inside #myheader placeholder in parent] </div>
<div> [Rest of my html to be shown under router-outlet in parent</div>

...

子组件：

<header>
    ...
    <div #myheader></div>
</header>
<router-outlet></router-outlet>

<div #myheader> [Some HTML to be shown inside #myheader placeholder in parent] </div>
<div> [Rest of my html to be shown under router-outlet in parent</div>

[某些HTML将显示在父项中的#myheader占位符中]
[我的html的其余部分将显示在“父”中的“路由器出口”下

---

我之所以需要这样做，是因为子组件的两边都有大量的填充，但是页眉是全宽的，所以它不像在每个子组件中指定子相对子页眉那样简单。

考虑构建一个具有页面页眉属性的服务

然后，ParentComponent可以访问服务以绑定到属性

每个子组件都可以根据需要设置属性

我这里有一个示例服务：

代码如下所示：

服务

   import { Injectable } from '@angular/core';

    @Injectable() 
    export class HeaderService {
      headerText: string; 
    }

父组件

export class ParentComponent {

  get header():string { 
    return this.headerService.headerText; 
  } 

  constructor(public headerService: HeaderService) { } 
}

export class ChildComponent {

  constructor(public headerService: HeaderService) { 
     this.headerService.headerText = ''; // <- Header text here
  } 
}

父HTML

<header>
    ...
    <div>{{ header }}</div>
</header>
<router-outlet></router-outlet>

...
{{header}}

子组件

export class ParentComponent {

  get header():string { 
    return this.headerService.headerText; 
  } 

  constructor(public headerService: HeaderService) { } 
}

export class ChildComponent {

  constructor(public headerService: HeaderService) { 
     this.headerService.headerText = ''; // <- Header text here
  } 
}

导出类子组件{
构造函数（公共headerService:headerService）{
this.headerService.headerText=''；//如果我传递的html包含复选框、选择列表过滤器等内容，用于操作子组件中的数据，这将是一个问题，对吗？我可能应该更清楚，父组件中的动态html实际上是一个工具栏，它位于父组件中，用于头部的html呃导航。