Angular4 - родительский дочерний элемент - реализация типа Masterpage (Header, content, footer)

Question

В компонентах заголовка есть несколько ссылок, и когда я нажимаю на любую ссылку, соответствующие данные для этой ссылки должны отображаться в другом компоненте, называемом app-Content. но данные отображаются только в компоненте заголовка.... не в компоненте контента.

Я пытаюсь добиться чего-то вроде главной страницы, где у нас есть верхняя панель навигации, содержимое и нижний колонтитул... при нажатии на любую ссылку в верхней панели навигации содержимое этой ссылки должно отображаться в центре (который является компонентом содержимого).

Я, конечно, что-то упускаю, или то, как это реализовано, неверно... пожалуйста, сообщите.

Это те компоненты, которые у меня есть.

<app-header>
<app-Content>
<app-Footer>
<page-one>
<page-two>

<app-Content>
<H2> Content </H2>
</app-Content>

<app-Footer>
 <H2> Footer </H2>
</app-Footer>

Index.html имеет ссылку на

Это от root.component.html

<div class="panel panel-default">
  <div class="panel-heading"><app-header> </app-header></div>
  <div class="panel-body"><app-Content> </app-Content></div>
  <div class="panel-footer"><app-Footer> </app-Footer></div>
</div>

header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
    <nav>
     <a routerLink="/Page1" routerLinkActive="active">Page1</a>
     <a routerLink="/Page2" routerLinkActive="active">Page2</a>
    </nav>
     <router-outlet></router-outlet>
    </ul>
  </div>
</nav>

app-module.ts также имеет зарегистрированную маршрутизацию.. поэтому, если я нажму на ссылку Page1 или Page2 - Примечание: Маршрутизация работает нормально... никаких проблем нет.

Answer 1

Попробуйте удалить из header.component.html и замените его в root.component.html на