angular - Angular4 - 父子 - 母版页（页眉、内容、页脚），如实现

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