angular - 在 Angular 的路由更改中更改页眉和页脚内容

Question

我正在开发一个简单的 Angular 2 应用程序，我目前拥有的路由是/login、/register、/home 和/profile。

在主应用程序组件上，我有一个 <header>节，一个<content>部分，和一个 <footer>部分。我目前有 <router-outlet></router-outlet>在content部分，但也想(有时)更改 header 中的一些内容和 footer content中有不同内容时的组件部分。

我研究了子路由(并计划用于内容部分中的某些路由)，但我不确定这是否是最佳方法，甚至可能。我所做的子路由研究来自 John Papa 的 Angular 2 类(class)，这是他的例子 plunker:http://a2-first-look.azurewebsites.net/examples/router-child/plnkr.demo.html?bust=1463590738850

我还探索了订阅页眉和页脚组件中的路由器更改，并使用 *ngIf 呈现不同的 html .这种方法似乎创建了一个全新的服务 SO 1 , 但这个似乎更直接一点 SO 2 .我在想我可以用 native Router 指令做一些事情吗？

任何帮助或正确方向的观点将不胜感激!谢谢

Answer 1

你可以把它放到你的运行 block 中:

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
    SomeService.header.dynamicText = 'Hello, World'
    SomeService.footer.dynamicText = 'Contact Us'
})

当然，您还必须将 SomeService 传递给您的运行函数。

更多关于这个方便的小服务 here