Angular4 - Parent child - Masterpage (Header, content, footer) like implementation
Angular4 - Parent child - Masterpage (Header, content, footer) like implementation
header 组件中有一些 link,当我单击任何 link.. 对应的数据 link 必须显示在另一个组件中名为 app-Content 的组件。
但数据仅显示在 header 组件中....不在内容组件中。
我正在尝试实现类似母版页的功能,其中我们有顶部导航栏、内容和页脚...当单击顶部导航栏中的任何 link 时,该 link 的内容应该显示在中心(即内容组件)。
肯定是漏了什么或者实现方式不对...请指教
这些是我拥有的组件。
<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 也注册了路由.. 所以如果我点击 link Page1 或 Page2 -
注意:路由工作正常......那里没有问题。
尝试从 header.component.html 中删除并将其替换为 root.component.html 中的
header 组件中有一些 link,当我单击任何 link.. 对应的数据 link 必须显示在另一个组件中名为 app-Content 的组件。 但数据仅显示在 header 组件中....不在内容组件中。
我正在尝试实现类似母版页的功能,其中我们有顶部导航栏、内容和页脚...当单击顶部导航栏中的任何 link 时,该 link 的内容应该显示在中心(即内容组件)。
肯定是漏了什么或者实现方式不对...请指教
这些是我拥有的组件。
<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 也注册了路由.. 所以如果我点击 link Page1 或 Page2 - 注意:路由工作正常......那里没有问题。
尝试从 header.component.html 中删除并将其替换为 root.component.html 中的